Cse Tutorials

How to use Google Fonts

By Ashish Doneriya
Last Updated on May 05, 2016
H

  1. Open Google fonts
    Google Fonts Home Page

  2. Lets suppose I want Roboto, Ubuntu Mono and Oswald fonts for my site. Roboto for paragraphs, Ubuntu Mono for code and Oswald for headings. So Search for the font Roboto
    Google Font Search

  3. Click on google fonts quick use option in front of font which you want to use.
    Google Fonts Quick Use

  4. Select the styles which you want to use and then click on 'Add to collection'.
    Google Font Style Selection
    After that Roboto is added to collection.

  5. Now we have to add Ubuntu mono font. For this click on 'Choose'.
    Google Font select another font Add Ubuntu Mono and Oswald fonts in the same way you added Roboto.

  6. To use font in your site. Click on 'use' in the bottom right corner.
    Google Font Use

  7. Scroll down You will see options to import fonts. Google Font Import

  8. Copy and paste the code according to your requirement. ie. there are three ways by which you can import fonts through your site, through html, through css and through javascript.

  9. If you want to import through html then copy the code under 'standard' tab and put the code in the <head> of your HTML document.

  10. If you want to import through css then copy the code under @import tab and put the code in the top of your style sheet

  11. If you want to import through Javascript then copy the code under 'Javascript' tab and put in the script tag or in javascript file

Published in: Web Development
Originally Published On : May 05, 2016