Font Changes

Getting started with changing you applications fonts.

LOCATION OF FILES/RESOURCES

resources/fonts

resources/settings/theme.json

resources/settings/config.json

DESCRIPTION

In this particular project there are three places to make use of custom fonts. Otherwise one place if you plan on using outside fonts from GoogleFonts. Changes for the website to make use of fonts you have chosen is done through the theme.json file. 

Adding the fonts you want to include into the resource/fonts directory.

Finally, specifying the fonts you included within resource/fonts directory in the config.json file. This file is used to load the files dynamically. 

SETTING UP FONTS

resources/fonts

If you plan on using local custom fonts, you need to put them within the fonts directory to be accessible. 

IMPORTING FONTS

OPTION 1 : CUSTOM/LOCAL FONTS

By adding fonts to the google section, it will load fonts from them directly. You need only specify the name(s), and url(s) like the example below.  

OPTION 2 : GOOGLE/EXTERNAL FONTS

By adding fonts to the google section, it will load fonts from them directly. You need only specify the name(s) like the example below.  

OPTION 3 : DEFAULT FONTS

This particular choice makes use of common fonts already loaded by default from the browser. Therefore, the only configuration needed  to be made, is through the theme.json file. 

<p>config.json
{
  "fonts":{
    "google": {
      "families": ["Open+Sans:400italic,400,300,600:latin"]
    },
    "custom": {
      "families": ["Custom Font"],
      "urls": [
      	"web/fonts/CustomFont-Bold.otf",
   		"web/fonts/CustomFont-Regular.otf",
        "https://external-url.com/CustomFont-Regular.otf"
       ]
    },
    "timeout": 3000
  }
}</p>
Click to copy

It is important to note that the web directory is equivalent to the resources directory.

USING NEW FONTS

Modifying  - theme.json

Below you can see how we can set global font family, or how we specify a specific font for heading tags. 

<p>theme.json
{
  "typography": {
    "fontFamily": "sans-serif", // Here is global
    "h5": {
      "fontFamily": "sans-serif", // Here is specific h5 tags
      "fontWeight": 400,
      "fontSize": 26,
      "lineHeight": "28px",
      "color": "#006ebf"
    },
    "h4": {
      "fontFamily": "Custom Font",// Here is specific h4 tags
      "color": "#333",
      "fontSize": "16px",
      "fontWeight": 400, // Normal
      "lineHeight": "24px"
    },
    "h3": {
      "fontFamily": "Custom Font", // Here is specific h3 tags
      "fontSize": "22px",
      "fontWeight": 700 // Bold
    },
    "h1": {
      "fontFamily": "sans-serif",// Here is specific h1 tags
      "fontSize": "16px",
      "fontWeight": 400
    }
  }
}
</p>
Click to copy