How to embed font in CSS (from web server OR google fonts)

Replace FontName with font’s name. The FontName is what you will be calling throughout the CSS classes.

@font-face {
     font-family: FontName;
     src: url(FontName.woff);
}

That’s how you embed a font in your web server. Now let’s learn how to embed fonts from google fonts API.

Go to fonts.google.com and make a collection of your favorite fonts (or simply the fonts you want to be embedded in the website).

You can do so by clicking the sign near each font.

Now that you have selected some fonts, “Families Selected” box will appear in the bottom of the page. Click that box and you will find a code similar to the one below:

<link href="https://fonts.googleapis.com/css?family=Baloo|Love+Ya+Like+A+Sister|Oswald|Roboto|Roboto+Condensed|Slabo+27px" rel="stylesheet">

Copy that into the <head> of your HTML file.

Now there will be relative CSS rules given in the same window. Find something like this:

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

font-family: 'Baloo', cursive;

font-family: 'Love Ya Like A Sister', cursive;

font-family: 'Slabo 27px', serif;

font-family: 'Roboto Condensed', sans-serif;

font-family: 'Oswald', sans-serif;

Use the font-families to call specific font.