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.

  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.

Add the first comment and start a discussion

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses cookies to optimize the use of it and for statistical purposes in accordance with Privacy Policy. The conditions for storing cookie files can be specified in Browser Settings. Further using the site and not blocking cookies means that you accept the use of these files.

Service namePurposeSettings
Cookies funkcyjneCookies required for the operation of the website.
Google AnalyticsAnalytical purposes.
DisqusCookies required for the operation of the comments system.

Need help?

Thank you!

success

We will answer in next 24 hours

Need a help? support-icon