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.
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:
The original Google font file was around 101 kb but with this limited text, the font file is reduced to 7.6 KB.