Content Portal Typography

Heretto CCMS makes portal design accessible by letting you customize fonts.

How to Customize Fonts

In Heretto Deploy Portal there are three ways to include custom fonts. Choosing the approach that will work best for you depends on how you decide to structure the styling and configuration of the portal.

The first approach is to use the Web Font Loader package, which can load fonts from . This is a JavaScript library that gives you control over fonts, and it also lets you use multiple web font providers. To implement this approach, update the config.json file with the appropriate code. For example:

"webFonts": {
"google": {
"families": ["Material Icons", "Material Icons Sharp"]
},
"custom": {
"families": ["Social"],
"urls": ["https://assets.portal.heretto.com/fonts/social-icons.css"]
	}
} 
Tip: Documentation and the source code for the Web Font Loader is available in the GitHub repository

The second approach is to add a special stylesheet link into the config.json file. The stylesheets property in the configuration file needs to include a custom stylesheets value that links to the appropriate stylesheet. These are included at the beginning of the HTML page. Here is an example of the config.json file code:

"stylesheets": ["https://my.favorite.cdn/custom-styling-items.css"]

                

The third approach is to use the theme.overrides.MuiCssBaseline configuration property. These overrides are included via Material UI + JSS and are server-side rendered in <style> elements.

"theme": { 
"overrides": {
"MuiCssBaseline": {
"@global": {
"@font-face": [{
fontFamily: "'Fira Sans'",
src: "url(https://fonts.gstatic.com/s/firasans/v11/va9E4kDNxMZdWfMOD5Vvl4jLazX3dA.woff2) format('woff2')",
unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
fontWeight: "normal",
fontStyle: "normal"}]
		}
	  }
     }
} 

To override the material UI theme font there are two places that need to be defined in the theme property of the config.json file. The first place is in the:

  • theme

  • typography

  • fontFamily

properties.

The second is the --mdc-typography-font-family CSS variable.

"theme": { 
"typography": {
"fontFamily": "'Fira Sans', sans-serif",
	},
}

The mdc-typography-font-family can be set one of two ways: A regular CSS file included by the tenant, or in config.json file. Here's a CSS example:

:root {
--mdc-typography-font-family: 'Fira Sans', sans-serif;
}

Here is a config.json example:

"theme": { 
"overrides": {
"MuiCssBaseline": {
"@global": {
":root": {
"--mdc-typography-font-family": "'Fira Sans', sans-serif"}
			}
		}
	}
}