How To Add Custom Fonts To Your Website Using The Google Font API

by Rubie Tiburcio

Would you like to make your website prettier, more custom, or simply easier to read? Modifying the fonts is a simple way to spice up your site. Here's how:

First, in Google Fonts, choose your desired Google Font Style(s) from the list. You will need to select all the types based on Google's convention -- in this case, pressing the plus symbol which will add the specific type to your list of Fonts.

Once you have found your fonts, add the following line of code into the <head> of the html document. You can instantly copy the embeddable code snippets generated by Google from the modal screen at the bottom of your page.

For example:

<link href="https://fonts.googleapis.com/css?family=Coiny|Poppins" rel="stylesheet">

Coiny and Poppins are the type of fonts I selected.

Finally, go to your CSS file and modify the HTML font element attributes with the desired Google Font Types.

For example:

h1, h2, h3, h4, h5, h6, .btn {
  font-family: 'Coiny', cursive;
}

p, li {
    font-family: 'Poppins', sans-serif;
}