How to use Google font on my web page?

If you have been developing web pages before the advent of Google Fonts then you may remember the limit on using various fonts for your web page. There were two options:

  1. Use a font which was readily available on most user’s computers. This forced developers to use the same old fonts thereby giving all web pages same type of look and feel no matter what the niche.
  2. Allow an option to download the special font to the user’s computer so that the user could view the web page with the special font. The only drawback to this option was that user would not download font files to their computer just to view your web page or for that matter other web pages.

Seeing all these issues led to the birth of Google Fonts in 2010. Google Fonts allows you, the developer, to view thousands of fonts online and use them on your web pages by embedding them via your CSS or you can download those fonts and then use them.

If you would like to embed any Google Font on your web page then you can follow the steps below:

  1. Browse to https://fonts.google.com/
  2. Search for the font your like to use based on language, category, property, author etc.
  3. Once you have found the font to use on your web page click on the font to open its detail page.
  4. For this example we will be using the Roboto font.
  5. If we browse to https://fonts.google.com/specimen/Roboto?query=roboto we will see various options on the page like selecting the font style of the selected font to use on the web page, glyph icons as well as other fonts with which we can pair our selected font to make its look more unique.
  6. Once we have decided the font style to use click on the Select Style link to the right of the selected style. We will be provided option to either download the font or embed it in our code.
  7. We will choose the latter option. We can use the following code in the <head> section of our web page
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    and then use the following code in our CSS stylesheet which will apply the said font style on our web page.
    font-family: 'Roboto', sans-serif;

That is all you need to do to start using your preferred Google Font on your web page.

Hope the above helped

Please follow and like us: