Hi,
I’ve downloaded Google fonts into my child theme and added the necessary stuffs to my CSS, and the fonts look fantastic on every single browser, except for Firefox, which defaults to the backup font. How do I fix this?
https://www.riverstothesea.com/newRTTS
Hi there,
It seems that your hosting service provider blocks the Cross Domain access of the fonts and that is why the browser is restricting the font for the CORS policy:
Please follow the steps mentioned in the article below to fix the issue:
Thank you.
Hi there,
I don’t think I’m using Font Awesome, though… since I’ve downloaded the Google fonts into all the different versions like so:
@font-face {
font-family:‘Pacifico’;
src: url(‘https://www.riverstothesea.com/newRTTS/wp-content/themes/pro-child/fonts/Pacifico/Pacifico-Regular.eot’);
src: url(‘https://www.riverstothesea.com/newRTTS/wp-content/themes/pro-child/fonts/Pacifico/Pacifico-Regular.eot?#iefix’) format(‘embedded-opentype’),
url(‘https://www.riverstothesea.com/newRTTS/wp-content/themes/pro-child/fonts/Pacifico/Pacifico-Regular.woff2’) format(‘woff2’),
url(‘https://www.riverstothesea.com/newRTTS/wp-content/themes/pro-child/fonts/Pacifico/Pacifico-Regular.woff’) format(‘woff’),
url(‘https://www.riverstothesea.com/newRTTS/wp-content/themes/pro-child/fonts/Pacifico/Pacifico-Regular.ttf’) format(‘truetype’),
url(‘https://www.riverstothesea.com/newRTTS/wp-content/themes/pro-child/fonts/Pacifico/Pacifico-Regular.svg#Pacifico-Regular’) format(‘svg’);
}
Do I still need to do what the article says? Or is Font Awesome ON for my site and it’s causing conflict? Sorry, a little confused. Isn’t Font Awesome just Icons?
Hey @DzinePOD,
Your font (Pacifico) does not work in all browsers on my end.
Chrome:
Firefox:
I see you already have set Pacifico in the Font Manager as Cursive Heading. You just need to select that font family in the Text options.
The problem is with your use of downloaded font setup. Your host blocks the font because of CORS. @christopher.amirian was not referring to Font Awesome but a potential fix to CORS. If you wish to continue with the custom font setup, you will need to discuss this with your host.
Thanks.
I wouldn’t mind just using X-Pro to handle my font call-outs, but I guess I’m a little confused still (first time round with pro) about the Font Manager. I placed in the fonts I need for the site there, but then when I have a Headline that has two different fonts in it, I’m not sure what to do. That’s why I downloaded the fonts, just wanting to get it all in there and working. But… I guess, perhaps the font-family is already ready to go since I already added them to the Font Manager? I just need to add the right css to target that bit of font? Then, I don’t really need to download the fonts like I did?
So, I added a bit of code to my .htaccess file for the CORS fix and it’s looking good on my end. Can you check on your end to see if the correct fonts are showing up on Firefox now? Fingers crossed.
Let me know if I should delete the fonts I downloaded since I already have them in the Font Manager. For Google Fonts, do I need to even place them in the Font Manager (or download them), or can I just call them out in CSS already?
Thanks… a little confused, just need a little ironing out.
Yes, selecting the font either in Typography setting or in your content will load it so there’s no need to download Google Fonts.
Yes, you just need CSS to target certain texts.
You need to delete your downloaded fonts because they’re unnecessary and also adding up to clutter and page load.
In case that does not help, please see https://youtu.be/6np8Z-WGALk
Thanks.
I understand! Thanks for your help. Totally makes sense now. 
You’re always welcome!
Cheers.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.