Every web designer wants to use very impressive-looking and eye-catching font style for each new project but it was not easy as today. In old days we used to have to code our webpages according to the font consistently available, then google launch this wonderful directory Google Web Fonts

This article will describe main options of Google web fonts, and how to use those options to produce unique font styles for website.

Google Web Fonts Main Page

We have 649 font families available, these fonts located on google servers and these fonts are free to use. Out of these 649 font styles, 27 belong to Serif, 165 to Sans Serif, 229 for Display, 115 from Handwriting, and 13 are from Monospace. 


To preview sample text, there are four options Word, Sentence, Paragraph and Poster. All four options can be try by selecting specific tab name. One can use his/her own text to preview by replacing default text.

Tab options of Google webfonts


There are five options of sorting and default is Popularity.

Alphabet: it shows font styles in Alphabetical ascending order A-Z.

Date of Added: according to the date it added in Google font family.

Number of Styles: it sorts all font styles according to number of styles having it, in descending order highest to lowest.

Trending: Sorts font styles according to trend.

Popularity: Most popular font style will be on the top


Search for required font style can be narrow down by filters. There are four options in it: filter by font family name, Thickness, Slant, and Width. It can be done by selecting any one option or combination of options. We search for Ubuntu font face for our website, and we get three results. Very first font face has 8 styles by Dalton Maag. If we click first option it will show all 8 styles in the form of list. More detail about Ubuntu font style can be seen by last option Pop out.

Suppose, we have decided to use Ubuntu Mono font in our website, click on Quick use option or Add to Collection then click on Use.

Impact on page load time:

Here it asks which specific style you want to use. The more styles you add the longer it impacts on page load time. There is little dail overthere on the right side which shows the page load time. If you select all font styles, notice that your page load time adds quite a bit and it will slower down load time of webpage and this is a very big deal when you are working with mobile. 

impact on page load time normal


Impact on page load time with all selected options

So the only one which you realy want, select that one and deselect all others. Thats all you need to do, so now you scroll down and its giving the code that you need to add into your website. Highlight the code, copy and paste in the head section of your webpage.

Add comment

Security code