All fonts in Google’s catalog are free and open source, accessible to anyone for any project. Google Fonts makes web pages run faster by safely caching fonts without compromising your privacy or security. Using the code generated by Google Fonts, Google’s servers will automatically send the smallest possible file to your site based on the technologies that your browser supports. To learn more, please visit Google Fonts for specific and detailed instructions.
Many of our templates use Lato, PT Sans, Montserrat, Source Serif Pro, and many more, courtesy of Google Fonts. However, you can customize and choose different fonts. To use Google Fonts on your website, all you have to do is go to Google Fonts and search for a font. There are two ways to embed your selected font into a webpage. You can use the @import rule or the <link> tag.
Using the @import Rule
You can start using the Google Fonts API by importing the font stylesheet directly into the style.css file in just four steps:
- Open the style.css file in your code editor.
- Copy the code snippet available under the “@Import” subtab in the selection drawer and paste it into the style.css file.
- Style an element with the requested font using the font-family property in the same CSS file.
- Save the style.css file and view the changes in your web browser.
Here is the code which you need to modify to import a Google Font:
/* Importing Lato */
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');
/* Adding Lato */
body {
font-family: 'Lato', Helvetica, sans-serif;
}
Depending on the template you’re modifying, you may have to change the font-family elsewhere in the style.css and not only in the body area. Using your code editor, simply search for font-family and replace the font names with the ones you want to use. Because some templates contain more than one font, you will need to search for the font-family multiple times and replace it with the new font until you have changed all instances in the style.css.
Using the <link> Tag
Alternatively, you can add the font stylesheet link directly into the index.html file and style an element with the font in the style.css by following these instructions:
- Open the index.html file in your code editor.
- Copy the code snippet available under the “Standard” subtab in the selection drawer and paste it between the <head> and </head> tags of the index.html file.
- Open the style.css file in your code editor.
- Style an element with the requested font using the font-family property in the style.css file.
- Save both files and view the changes in your web browser.
Here is the code which you need to modify to link a Google Font:
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
</head>