All geek questions in one place

How to download a large number of Google web fonts?

Is there a better way to upload a large number of Google web fonts to one page?

Perhaps some of them are delayed during page loading? Or maybe download certain fonts only after the user scrolls the page to a certain point?

I can't help but think that there is a better way to download multiple fonts. After posting 2 or 3 on Google's Font Collection, the page load appears to be pretty high.

I'm not trying to be sticky when designing with a bunch of fonts, but I'm trying to think of a better way to display a lot of fonts - sort of like a sample book.

I think the best example is endless scrolling on Myfonts . I know that these fonts do not display using web fonts, but I think there should be a similar way to download web fonts. I mean, how does Google load all these fonts on a page?

+4
source share
1 answer

I don't know if this will work for you, but Google Web Fonts provides a JavaScript method that you can set when to use the font. (Maybe download the fonts after the page loads?)

Try the live demo .

Example (using the Glass Antiqua font):

<script type="text/javascript"> WebFontConfig = { google: { families: [ 'Glass+Antiqua::latin' ] } }; var YOURFUNCTION = function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); }; //Maybe 10 seconds later? setTimeout(YOURFUNCTION, 10000); //Document Ready? $("body").ready(YOURFUNCTION); </script>

Demo: http://jsfiddle.net/DerekL/bkV7E/

+2
source

Source: https://habr.com/ru/post/1395676/

More articles:


All Articles