How to add Google Fonts to Your WebSite

2015/10/21 min read
bookmark this
Responsive image
  1. Find out what's font you'd like to use
    • google fonts page
    • Go to above link to check what's the font want to use.
    • For instance, i'm using Light 300 for Open Sans
  2. Add code to your Web Application
    • Add google api link & add font family to the css
    • Code of link
    • <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css' />
    • Code example of add to the css, bootstrap SASS
    • 
      $font-family-sans-serif:  "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
      $font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
  3. Example UI
    1. Following is the layout after I update the google font api.

 

Furthermore, if you need more information about google fonts, see following links.

Getting Started Google Fonts