CODEWITHSUNDEEP
htmlcss
user1814971
user1814971

Reputation: 167

How to verify that google web font is working or not?

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.

Upvotes: 1

Views: 3678

Answers (1)

Anil
Anil

Reputation: 21910

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!).

Upvotes: 3

Related Questions