Add Google Fonts in HTML/CSS Tutorial – How to

Add google fonts in your website and save your time. Customize your font & paste a single line of code. Now start using multiple variants of desired font.

Typography is the key element for any design. Choosing best web fonts is base element. Web fonts are easy to add helps you to save your hosting bandwidth. After using Googles fonts API you are going to love it. After reading this tutorial you will learn how to Add Google fonts to HTML/CSS.

Beside content users are judging your fonts choice. And will love to visit you again.

Adding Google Font to HTML

  • Choose the font from Google Fonts Library and select it by pressing the (+) button.
  • A black box will appear having your font with some options in the bottom of browser.
  • Customize: you can customize font which type of style you want (i.e. Light, Bold, Italic).
  • Languages: choose your character sets such as latin, greek, and vietnamese.
  • EMBED: Copy the HTML and paste in <head> tag of your document.
    <link href=",400,700" rel="stylesheet">
  • @IMPORT: this option typically add in your CSS file to directly import font library.

Assign Font to your Element:

As we are assigning the font to the paragraph tag <p>. You can either use any tag like <body> tag to assign font to whole body.

p {
font-family: 'Roboto', sans-serif;

Adding Multiple Google Fonts

Including multiple fonts is same as the above method but you need to press (+) buttons more then one by choosing different fonts. Because google provide you the best fonts with multiple fonts support.

Customize your fonts and copy the code in the Embed Tab. It will have a ” | “ you can notice for multiple fonts.

<link href=",400,700|Lato:300,500,600" rel="stylesheet">

Now use the fonts freely like font-family: Lato, sans-serif;

Elegant fonts on web page attract user to your website. Key difference between our own font and Google font is they can work on any browser or platform. Google content delivery system reassure you, that fonts will always load no matter on any cost(unless you make mistakes).

Having an issue, using fonts do comment us. But hope you learn how to add google fonts to your web page or adding multiple google fonts in website.


Leave a Reply

Your email address will not be published. Required fields are marked *