Adding fonts to your website from Google

If you can't find a font under Theme > Fonts, colours and styling these are the steps to get a new font added to your website from https://fonts.google.com/

  1. Go to https://fonts.google.com/ and search for the font
  2. If the font appears in the search, select the font
  3. When on the selected font, click Select this style on the specific styles you require
  4. Selected family will then appear on the right side of the webpage.
  5. Under Selected family, you will find the HTML to use under the heading Use on the web
  6. Copy the code from <link href do not copy the code before this, here's an example:


    Do not copy strike through text

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

  7. Next, go to the admin area of your website, click Themethen go to Define fonts
  8. Paste the HTML code into Additional meta tags required
  9. Once copied across, go back to the font on https://fonts.google.com/ and copy the text under the heading CSS rules to specify families
  10. You only need to copy the text that comes after font-family here's an example:


    Do not copy strike through text

    font-family:'Roboto', sans-serif;

  11. Once the correct text has been copied, paste it into the field Family name
  12. After all the above steps are complete, put the name of the font in the Title field, and make sure Tick this box to enable this font has been checked. Then hit save
  13. Your new font is now ready to use!
We're currently working on our documentation pages. If you can't find what you're looking for please email support@sonderdigital.co.uk or just give us a call on 01823 299 519.
Loading... Updating page...