Typography Options

Defaults #

2388.png

Choose one of the web safe font combinations (that are installed on every computer or device) or select one of the hundreds of Google Fonts. When you set any of Google Fonts, your site pages will load font files from the Google servers. In case you don't want to load files from side servers, you can upload them into the theme. Select Font Size and Line height for Desktops and Mobiles separately via the corresponding inputs.

"Font Size" option affects on the whole website. The larger the "Font Size" value, the larger the value of widths, heights, paddings, margins of most theme elements and page areas.

Headings #

2390.png

Headings have the same font selection option as in Defaults. But there are more options to customize the appearance of h1-h6 headings separately. If you set "No font specified" for headings, they will inherit font from Defaults. Select Font Size for Desktops and Mobiles separately via the corresponding inputs.

Additional Google Fonts #

This option allows adding more Google Fonts for using in theme elements. All added fonts will generate only one request to Google servers for better pages loading speed.

Google Fonts Display #

Sets behavior of fonts rendering. Read about "font-display" property.

Uploaded Fonts #

When you have some custom font (or don't want to load fonts from Google), you are able to upload font files and use them as a separate font in theme elements.

Only woff and woff2 font types are accepted by Impreza.

If you don't care about viewing your site in Internet Explorer 11 and UC Browser for Android, just use woff2 files only, because they have the smallest size. Check the browser support. To convert your font files to woff and woff2 types we recommend to use web font generators:

When you have the needed files, go to Impreza > Theme Options > Typography > Uploaded Fonts and upload them inside an added group.

If you have different files for different font-weights of the same font, you should to upload weights as separate groups and set the same Font Name for those groups. Check the example on the screenshot:

2353.png

Regular font files correspond to 400, bold font files correspond to 700, but Font Name is the same in both groups. This combination will generate 1 font with 2 weights and add it into the font selection option of theme elements.

You're able to use uploaded fonts in:

  • Theme Options > Typography > Defaults (after page refresh)
  • Theme Options > Typography > Headings (after page refresh)
  • Theme Options > Buttons (after a page refresh)
  • Elements in Headers
  • Elements in Grid Layouts
  • Elements in WPBakery editor
  • any element via custom CSS:
    .your_element { font-family: Font Name; }