Font customization

Default fonts:

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;

fonts 1

 

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.

Google Fonts:

  • 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:

font-weight

 

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.