How to add any font from Google Fonts to your website

If you want to add new font to your website, and this new font is available in Google Fonts collection you can use this manual. It’s very easy and you should be able to follow all required steps even if you are not a technical person.

The website fonts.google.com
  1. First of all, choose the font from the library on https://fonts.google.com/
  2. On font’s page select desired variant of this font by clicking “Select this style” next to the style you need to use on your website.
  3. Navigate to “Embed” / “Use on the web” section of the Google Font screen and choose “@import” option
  4. Copy all the text between <style> and </style> tags, and paste it at the very top of style.css file in your child theme directory. You will find it on your server if you follow this path: your_website_directory/wp-content/themes/astratic-child/
  5. Right below you should past following css code (remember to change “Font Name” to the name of the actual font you want to use)
    :root {
      --font-primary: "Font Name", sans-serif !important;
      --font-headings: "Font Name", sans-serif !important;
    }
  6. Font-primary variable is your main font for the whole website, font-headings variable is where you set the font for all headings.

Have any questions? It there anything we can help? Write about it in the comments below ????

Need help?

Thank you!

We will answer to your message as soon as possible

Need help? support-icon