When using Advanced mode templates and/or headers and footers in both Simple and Advanced mode, you use the rich text editor to define your content. In this editor you are able to set styling options, such as font, size, etc. When setting the font, you can select from a set of predefined font types, such as Arial, Verdana or Times New Roman.
If you want to specify a font that is not included, you need to import that font using CSS statements. These CSS statements need to be included in the CSS section of the print template, for example, to use "Roboto Variable" font, include the following:
@font-face {
font-family: 'Roboto Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
Note that you must reference fonts on external public CDN URL. You cannot reference fonts stored in SharePoint document libraries or provide any type of relative URL. Search the web for "font-face <your font name> CDN" to find the appropriate CDN.
Next, you need to set the font in your rich text editor. Switch to source code mode by clicking on <>, find the HTML element surrounding the text you want to set the font to, then enter the style configuration. For example:
<div style="font-family:Roboto Variable">This is Roboto Variable text</div>
Note: the font will not appear properly in the rich text editor itself, as it's not loaded there. But it will be used when you actually use the print template.
