Font Display.


Long time I didn’t write any posts. Actually, I was busy with optimizing this website and from those optimizations, I would like to tell you a thing that would be an active tool in your optimization. So, let’s have a look,

Sometimes it is seen that, on page load, page was completely white and no texts were visible for a second or maybe texts were seen partially or they appeared strange for a second or it was flickering once and then it became normal. All you need is to add this following code in your font’s .CSS file or in the font property.

This is the code that will fix it,

font-display: swap;

Where in the font property should I add this code? Here is the example,

@font-face {
font-family: justafont;
src: url(/path/to/fonts/a.woff) format('woff'),
url(/path/to/fonts/b.eot) format('eot');
font-weight: 400;
font-style: normal;
font-display: swap;
}

Normally, Google recommends to use,

font-display: fallback;

But, from practical experience, I would suggest you to use,

font-display: swap;

Instead of

font-display: fallback;

Normally, most websites use Google fonts these days and here font’s .CSS is not hosted locally and there you cannot add this fix. To solve it, you must first download that .CSS (you could give it any name you prefer, but you must add the .CSS in the end, for example, font.css or it could be myfont.css) and those fonts on the hard-drive, add the above code in that .CSS file and then you will upload them to your “public_html” folder (you will upload that .CSS file and those fonts). It is best to create a separate folder in the “public_html” folder where these fonts and that .CSS file will stay (for example, “public_html/wp-content/myfont/”, here “myfont” is the directory that I created in the “wp-content” folder where I will keep those fonts and that .CSS). And then as an example this would look like the codes below,

@font-face {
font-family: justafont;
src: url(/wp-content/myfont/a.woff) format('woff'),
url(/wp-content/myfont/b.eot) format('eot');
font-weight: 400;
font-style: normal;
font-display: swap;
}

Note: It is also possible that you only download that .CSS and add that fix, host it locally to the “public_html” as it is mentioned above and you don’t download those fonts. In that case you must not change “src: url” (Please see the codes above to find ‘src: url” part) in the .CSS, you would leave that path how it came originally instead. 

Yes, now I can see that a website is getting properly shaped after adding this code and this could be your website. All the best and love you all.

(Please see related posts below)

Leave a Reply

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