How to add Google Font to the CSS File

Posted on by Victoria

Best option:

  1. Just go to https://fonts.google.com/
  2. Add font by clicking +
  3. Go to selected font > Embed > @IMPORT > copy url and paste in your .css file above body tag.
  4. It’s done.

Second Option:

<link rel=”stylesheet” href=”//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en” />

Third Option

Looks like  this one not a recommended.

Place @import at the very first line of the CSS file:
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
font-family: ‘Open Sans’,serif;
}

Forth Option

  • You can also use @font-face to link to the URLs.
  • http://www.css3.info/preview/web-fonts-with-font-face/

Fifth Option:

Download the font ttf/other format files, then simply add this CSS code example:

@font-face {

font-family: roboto-regular;
src: url(‘../font/Roboto-Regular.ttf’);

}

h2{
font-family: roboto-regular;
}