Load web fonts to avoid performance issues and speed up page loading

[Ritwik880]

Describe the bug Adding More fonts are causing problems like page loading and affecting performance

To Reproduce Steps to reproduce the behavior:

1. Use the correct font format
2. Preload fonts
3. Avoid invisible text during font loading.
4. Use the correct font-face declaration

Expected behavior I will prefer Correct font-face declaration. Declaring a font-face family is very simple but we must take care with certain things when we do it. We can use optimised fonts and we tell the browser to load only the required glyphs range (from U+000 to U+5FF),

[saurabhdaware]

Hi Ritwik, we do currently use web fonts and also preload the fonts that are required at later stage. Also the 'swap' value in URL of font, makes it visible before the font loading and swaps to new font when font is loaded.

This is the line that has preload: https://github.com/saurabhdaware/text-to-handwriting/blob/master/index.html#L44

We can use optimised fonts and we tell the browser to load only the required glyphs range (from U+000 to U+5FF),

Can you elaborate on this point? and is there a way to tell google fonts to load particular glyphs?

[Ritwik880]

But there is a caution in using preload fonts. If we are using CDN like Google Fonts, we have to be sure that the font files you’re preloading match the ones in the CSS. Fonts can also be regularly updated, and if you’re preloading an old version while using the CSS for a newer one you may end up downloading two versions of the same font and wasting your users’ bandwidth.

[saurabhdaware]

I am not really loading them in CSS. In the line of code, I've mentioned earlier, when the font loads, onload event of that font I change rel to stylesheet which adds the font so the problem you've mentioned is not really applicable.

[Ritwik880]

I agree but this property doesn’t prevent browsers to download the entire font There are also two more things to note, the local() function and the font declaration order.

The local() function allows users to use their local copy of the font if present (e.g. think about the Roboto fonts that are pre-installed on Android) instead of downloading it.

[saurabhdaware]

Oh I didn't know about the local() function, Thank you! But in that case, we will have to load fonts in CSS rather than head right? plus it will only work for common fonts, the fonts from Text-to-Handwriting won't be installed in the device and if they are, browsers should by default fallback to it before the font loads.

I agree but this property doesn’t prevent browsers to download the entire font

Is there any easy way to do that with Google fonts?

Though the performance is important, These changes only add a few milliseconds of performance improvements (correct me if I am wrong) so if it requires lots of changes in code and making the code difficult, it won't really be a good scalability practice to have these changes unless they have a significant improvement in performance.

One way I am looking to improve performance is by loading the extra fonts with JavaScript when user selects the font in dropdown.

[Ritwik880]

Yes u are right , one more thing u can do is that you can load multiple Google fonts with a single line of code. This means you do not need to have separate rows of code for each font you load. See the example below where I have combined the Open Sans and Fenix font. For example: http://fonts.googleapis.com/css?family=Open+Sans|F... rel='stylesheet' type='text/css'>

[saurabhdaware]

https://github.com/saurabhdaware/text-to-handwriting/blob/master/index.html#L44

Currently we have the main font and extra fonts into two URLs, if I load all of them together the loading will take longer so I load the main font first and then load other fonts separately