Google Fonts let you use professional-looking typography on your website without paying for font licenses. You can add them either by linking to Google's servers or by downloading the font files and hosting them on your own account, which usually loads faster.
Step 1: Pick Your Font and Get Its Code
- Go to the Google Fonts library and browse or search for a typeface you like.
- Click on the font, then select the weights and styles you actually need (for example, Regular and Bold). Adding styles you don't use only slows your site down.
- Copy the <link> tag and the matching CSS font-family rule that Google Fonts generates for you.
Step 2: Add the Font to Your Website
If Your Website Is Built With WordPress
- Log in to your wp-admin dashboard.
- If your theme supports it, go to Appearance, then Customize, and look for a Typography or Fonts section where you can paste the font name directly.
- If your theme doesn't have a built-in font option, go to Appearance, then Theme File Editor (or use a plugin such as a "Insert Headers and Footers" tool), and paste the <link> tag into the site's <head> section.
- Then add the font-family rule to your theme's Additional CSS box, found under Appearance, then Customize, then Additional CSS.
Editing theme files directly can break your site if you make a typo. Always use a child theme or a header/footer plugin rather than editing your main theme's files when possible, and keep a backup before making changes.
If Your Website Uses Plain HTML
- Open the HTML file for the page in your website's file manager or a code editor.
- Paste the <link> tag Google Fonts gave you inside the <head> section of the page, above your existing stylesheet link.
- Open your CSS file and add the font-family rule to the elements you want styled, such as body or specific headings.
- Save the file and upload it back to your website if you edited it locally, or save it directly if you used your hosting account's file manager.
Step 3: Consider Hosting the Font Files Yourself
Linking to Google's servers is quick to set up, but it adds an extra connection your visitor's browser has to make before the page finishes loading. For a faster site, you can download the font files and host them on your own hosting account instead.
- Use a font-download tool (search for "google webfonts helper" or a similar service) to get the font as .woff2 files along with ready-made CSS.
- Upload the font files to a folder in your website, such as /fonts, using your file manager or an FTP client.
- Add the generated @font-face CSS rule to your stylesheet, pointing to the uploaded files instead of Google's link.
Every extra font weight and style you load adds to your page's total size. Stick to two or three weights of a single typeface for the best balance of good design and fast loading.
If your website already feels slow after adding fonts or other assets, see How to Speed Up a Slow-Loading Website for more ways to trim load times.