02 Apr
Google Web Fonts & How you Load it Faster
About Google Fonts:
Google Fonts are a kind of directory which consists of web font API which are free. It is quite interactive and effective as well. It was launched back in the 2010 under the SIL Open Font License 1.1. This is a type of a free software license. These fonts are also taken care by the SkyFonts, belonging to the Monotype and also Adobe’s Edge Web Fonts along with the Typekit services. It is good to use this API since it provides you with one of the best quality of fonts for open source. It also is compatible with a number
of browsers. It is also that the Google Fonts are easy to use for your website. This is good to use it since it is a welcome from those boring and age old fonts installed in the software and you have to use them. It is also that these fonts are SEO friendly (Google Fonts will be friendly to search engines, never doubt it).
Downloading Google Fonts:
Now the question is that how can you have it downloaded on your website and faster. There are fonts which lack the style that would add more lustre to your content and make it look good. And the loading of these fonts and replacement of them with Google fonts is common, though it results in bad text format. Imagine then what your visitors will get when they will visit your site. The website will have fonts which have been set default like Arial, Calibri, etc. and then it gets replaced by Google Fonts. But while it replaces in the few seconds, it also affects the user friendliness of your site. Things can go to the extent of being annoying and your visitors may leave the site feeling frustrated. Hence it is essential that you have the Google web fonts load faster for your site to prevent these consequences.
How you do it:
Load the Google web fonts: To start with, have the Google font loaded after the HTML head tag but not after you have downloaded CSS file. It is better if the Google fonts is loaded before the CSS file. You can have the tags for your website look good
with the fonts which is in the CSS file.
The format for links:There are 3 ways through which the Google web fonts can be loaded. You can have it loaded wither with JavaScript, @import or with link rel. While the latter allows to place the code on the top of HTML, @import needs to have inserted into the file (CSS). However you can still have the fonts loaded in a wrong or unpleasant manner with @import.
Combining the codes of fonts: You can have a number of codes loaded by a single line and can combine them for faster results. Along with this, it is also advised that you load less codes in the beginning.
Try loading fonts which are fast:Google web fonts help you to know which fonts will get loaded faster. Once you know the ones, try to have them instead of the heavier ones as they take long time. Also don’t load a number of fonts at a time.