Google Fonts is a collection of open fonts which you can use in your websites, documents and open design projects. You do not have to worry about licensing of that as well. It only takes a single line of code to add any Google Font family into your website. 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.
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=GOOGLE_FONT">Pagespeed dependency and Google Fonts weightage
Google Fonts is an amazing option to make your website look good and energetic. However, with great features comes great responsibility as well. Whilst you add Google Fonts to your website, it will also add weightage to your website’s page load time. So your overall page speed score for your website is going to take a hit.
There is a workaround that you could follow to get around this. When you download the complete font then the size becomes around 100 KB or more. But, what you could do is, have Google select the fonts and letters that you are going to use. And Google would download those fonts only thereby reducing the download size and it would result in lesser querying the internet to download the fonts. That will reduce the weightage on your website page as well.
Steps to reduce the size of the Google Font files
All you have to do to reduce the size of the Google Font files is, you have to add a Text parameter in the query string and put your text there. The text would be the one you would like to see in Google Fonts.
Using this method, if a text file would cost you 100KB weightage then giving the texts to be download would reduce down the weightage to around 6 or 7 KB at max.
For example to download in Cabin Sketch format of Google Fonts:
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch&text=YOUR_TEXT_HERE'
rel='stylesheet' type='text/css' />Google Fonts are widely used by the front end and theme developers to render the text of logos and headings (h1, h2, h3, etc.) on a web page. This is so you can modify the CSS accordingly.
Alternatively, if you are willing to request all alphabets and numerals in the Google Font but none of the other things, your font CSS will looking something like this:
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20'
rel='stylesheet' type='text/css' />The Google font file in this example is going to cost you around 35 KB in size. That’s still 70% lower than the original Google font file.
Also, if you are wondering why in the example there is %20 in the text list, it represents the encoded space character. Similarly, you can add %27 and %22 to the list for a single quote (’) and double quote (”) respectively.
%20 – Space
%22 – ‘
%27 – “
Apply these methods on your webpage, and you would be astonished how the size reduces while using a Google Font using this method. Should you have any query or difficulty, please reach out to me in the comments section below and I would respond back to help you soon as I can.
Here are some of our trending articles you may like:
- Top Online Marketing Strategies to Accelerate your Business
- Top Digital Marketing Trends by far this year
- ShoutMeLoud Affiliate Marketing E-Book Review
- Blogging As A Career Option Boon or Bane
- Early Mistakes I Made In Blogging You Should Avoid
- Dark Side Of Entrepreneurship
- Design and Content Highly Misunderstood Or Most Confused Terminology in Blogging
- Akismet Plugin Review and Usage
- Let Go by Pat Flynn Review by Prabhudatta Sahoo
- Author hReview Plugin Review and Usage
I am a 33-year-old gentleman from a lower-middle-class family hailing from a small village Narasinghpur in Cuttack, Odisha, INDIA. I have a post-graduate degree in M.Tech from BITS Pilani. I started blogging back in June 2014. You can check out my journey and all that I have learnt all these years on my website.
