The theme comes with two preset default Google Fonts: Open Sans and Roboto. This ensures out of the box functionality and cross-browser visual consistency. The fonts usage is spread on various elements like the menu, post titles, blocks title, etc. For the elements which are not defined we added a general font family on the body and paragraph(p) tags: Verdana, Geneva, sans-serif;
The icons and other small design elements (ex. social icons, menu arrows, etc.) are included in the “newspaper” font which is located in the ../Newspaper/images/icons folder.
The easiest method to identify what font is used on a specific element is to use the browser inspector. You can find a guide here – link
tagDiv Composer/ Cloud Library fonts:
- Using the Page Builder elements and/or Cloud Library templates, you will find the font settings directly in the settings for each element in particular.
- The font settings will be different for each case depending on the element.
- Usually the font options are added under the style tab in the page builder options.
- You can change headers, categories, load more button, article titles, article meta info, excerpts and many, many more.
- Check the style tab and font settings for each particular element you add using the tagDiv Composer Page Builder.
Theme Panel Font Customization:
Newspaper Theme has a fully customizable Theme Fonts section where you can set custom, Google, or standard fonts, font sizes and font line heights.
- Theme fonts panel section is structured in a multitude of expandable areas related to the elements you can customize.
- In each area, you will find loaded by default a standard font, size, line height, style, and weight. All these elements are fully customizable.
- For each element from the Theme Panel > Custom Fonts you can use a different type of Google Fonts.
- Select the section where you want to apply the Google fonts.
- Google Fonts are included in the drop-down list.
- If you want to specify what type of character subset to load (by default is “Latin”) you can do it from Theme Panel > Theme Fonts > Google Fonts Settings.
- You can select from here what character subsets will be loaded for each google font. The character subset will be loaded only if the font supports the specific glyphs.
- In the following example for the Top Menu section we chose the Abeezee Google font, and we changed the other parameters (font-size, line-height, etc.)
Google Font Styles:
- You can choose the font weight you want for your fonts from the Google Font Style section found in Theme Panel > Theme Fonts > Google Fonts Styles
- The fonts will load with the default font weight of 400 and will load extra weights when the following selectors are enabled.
- The font weights will be loaded for all fonts because the fonts themselves will be loaded all at once to reduce the server requests.
- After you select the preferred font weights from the Google Font Styles, the fonts weights can be applied from the font-weight dropdown for each element in the Font Settings:
Note: The font you choose must have the font-weight available otherwise the font weight will not work. You will need to access the Google font repository and check if the font includes the font-weight you want to use.
Custom fonts files:
- If you want to use a custom font file make sure it has a .woff extension, else just convert it to .woff using one of the multiple online solutions.
- In order to use a custom font file it is enough to upload the font file by using the font upload buttons and provide a name for your fonts in the designated fields:
- Then your new custom font will appear in the fonts selection drop-down.