Home Newspaper 7 Documentation Font customization

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.

fonts 2

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

fonts 3

Font customization

Newspaper Theme has a fully customizable Theme Fonts section where you can set custom, Google, Typekit or standard fonts, font sizes and font line heights. Everything you need to adjust your website fonts you will find under the Theme Fonts tab!

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. Try to enable only the subsets that you use because the site will load slower with each additional subset.

 

fonts 4

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.)

td_custom_font_google

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.

font_styles

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:

custom_font_files

Then your new custom font will appear in the fonts selection dropdown.

Typekit fonts

1.Create an account on typekit.com

2. From Kits menu select Create new Kit

3. In the new pop-up menu:

  • Specify a name for your Kit
  • Specify the domain name were you will use the font
  • Press Continue Button

4. From the next pop-up copy the javascript code

5. Go to Theme Panel > Theme Fonts> Typekit.com Fonts

6. Paste the javascript code that you copy from the typekit website

td_custom_fonts_typekit_newkittd_custom_fonts_typekit_newkit_2td_custom_fonts_typekit_newkit_Newtd_custom_fonts_typekit_newkit_4

Add Fonts to your Kit

1. From the Typekit Library select the fonts that you want to use.
2. In the pop-up choose your Kit
3. In the new pop-up window press Publish button.

2016-04-11_1527td_custom_fonts_typekit_addfonts_22016-04-11_1550

Now that you have the fonts you just need to include them in the Theme Panel.

1. In the Typekit Editor pop-up window:

  • Press Using fonts in CSS link
  • From the pop-up copy the name of the font

2. Go to Theme Panel > Theme Fonts> Typekit.com Fonts.

  • Paste the font family name in the required filed.

3. Open the font panel for the section on which you want to apply the typekit custom font.

  • You will find your custom font under the Font Family drop-down for each sub-section.
  • Save Settings

You should now see the the font being applied on your website.

2016-04-11_15522016-04-11_1553td_custom_fonts_typekit_fontnames_3