A fix for Google Fonts not displaying correctly

  • post

Just a simple tip I wanted to share with you from my experience, which I hope might help you,
and will not cause you the same headache it did to me 🙂

While working on my website, I have realized that on one of my home PCs,
the fonts were not the same as I’ve decided them to be.

To elaborate some more, I have chosen a specific webfont from Google Fonts to use in my website,
and while testing it from other PCs I have realized that on some configurations –
the default font was showing (and not my chosen webfont).

So, I have started researching.

The problem

It appears that some configurations are having trouble with using fonts that are “drawn” from other domains.

Meaning – fonts that are being hosted somewhere else other than the site, Google for that matter,
are blocked for security purposes.

The solution

For me, the thing that solved it was adding few lines to the bottom of the website’s “.htaccess” file.
Usually this file would be located in the site’s root directory, public_html or something similar.

htaccess file
The lines are:

<FilesMatch ".(ttf|ttc|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

You’ll probably need FTP access to your site in order to make the required change.

The meaning of those lines is something that is called “cross-domain linking”,
which allows the website to use fonts that are hosted on other domains.

You can see that the file types are limited to common font file extensions (ttf, ttc, otf, eot and woff) and not other
kinds of files – so it appears that the procedure is safe.

Just make sure that you backup the contents of your current “.htaccess” file before changing,
in case something goes sideways 🙂

Hila Yonatan

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.