Google Fonts is a collection of open fonts that you can use in your websites, documents and other design projects without any restrictions around licensing.
It takes a single line of code to embed any of the Google Font families into your website design. Just substitute the font family in the following code (line #2) with the name of Google Font and copy-paste it inside the <head> tag of your HTML template.
1
<link href="http://fonts.googleapis.com/css?family=
GOOGLE_FONT_FAMILY_NAME
1
" rel="stylesheet" type="text/css" />
Page Speed and Google Web Fonts
While Google Fonts can make your website look good, there's one related problem - they increase the page load time of your website because the font files have to downloaded on the visitor’s computer and some of them, like the Cabin Sketch font, can exceed 100 KB in size.
There is however an easy workaround to help you reduce the file size of the Google Fonts so that they do not reduce the load time of a web page. Instead of using the entire Google font family, you can specify a limited set of letters or digits that are used in your text and Google will dynamically generate a new font file containing only the requested characters.
How to Reduce the Size of Google Font Files
All you have to do is add a new text parameter to the Google font request URL and value of this parameter will have all the letters that you need.
For instance, if I need to render the text Digital Inspiration in Cabin Sketch font, the modified CSS requesting the Google font file will look something like this:
1
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch&text=
DigitalInspiration
1
' rel='stylesheet' type='text/css' />
The original Google font file was around 101 kb but with this limited text, the font file is reduced to 7.6 KB.
Google Fonts are commonly used to render the text of logos and and headings (h1, h2, h3, etc.) on a web page so you can modify the CSS accordingly. Alternatively, if you wish to request all alphabets and numerals in the Google Font but none of the extra glyphs, your font CSS will looking something like this:
1
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch&text=
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20
1
' rel='stylesheet' type='text/css' />
The font file in this case is 37 KB in size and that's still 64% lower than the original Google font file. Also, if you are wondering why I have included %20 in the text list, it represents the encoded space character. Similarly, you can add %27 and %22 to the list for single quote (') and double quote (") respectively.
