CSS Constants

Most common styling elements such as:

  • Font family
  • Font colours
  • Button colours
  • Header background colours
  • Footer background colours
  • Primary width

can be managed within the template settings.

To update these:

  • Go to Templates → Activate (your template)
  • In the right-hand menu, navigate to CSS → constants.css
  • --primaryFont is for H-Tag fonts

Google Fonts

If you are using Google Fonts, you will also need to update the index.html file to include any additional font families required.

Example to retrieve the Google font settings:

  1. Open Google fonts -> https://fonts.google.com
  2. Select the font you want to use. For my example I'am using "Playwrite Ireland"
  3. On the top right of the screen there is a large Blue button "Get Font" click the button

  4.  Then click "Get embed Code"


  5.  As we already have google code in the system, you only require this part of the code marked in purple
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playwrite+IE:wght@100..400&display=swap" rel="stylesheet">
We need to add to the existing
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?Material+Icons&family=Josefin+Sans:wght@100;200;300&family=Lato:wght@300;400;700;900&family=Playwrite+IE:wght@100;200;300;400&display=swap" rel="stylesheet">
other info

Now to change the font name in constants.css
From: 'Josefin Sans', sans-serif;
To: "Playwrite IE", cursive;