Question

I have modified the code of someone else who are trying to load three google fonts.

They have 3 css file. Every css file have used one css font from google web fonts. In chrome dev tool I have seen only one fonts work and other 2 not.

it’s happen because only one can applied so chrome trying to download one. When they changed the font on dropdown’s select change it’s not worked because font is even not loaded in chrome.

Because I want to load the font when they changed the dropdown so I write this code:

<div id="hiddenFontLoader"></div>

CSS:

#hiddenFontLoader {
    font-family: 'Quicksand', 'Cantarell';
    display: none;
}

This code help me to load other 2 fonts that is used nowhere and will be used when dropdown changed.

Now I want to prove that it’s working. For me I can just set the font 400% and can check that is working or not.

What is the proper way to test the font is loaded or not. I means if I use fallback fonts then I can’t check if all fonts have very small difference and fallback font are very similar to the font I load from Google font.

Suppose I applied to the body{} then how to confirm it’s work in chrome dev tool or firebug.

Anybody have trick for it.

Answer 1

You should consider using Google WebFont Loader.
The documentation is very thorough. Specifically, check out the Acting on Events.

https://developers.google.com/webfonts/docs/webfont_loader

I believe you are looking active event (Click Here!).