Typography Options

Updated 5 months ago

Defaults #

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 to 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 #

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 use in theme elements. All added fonts will generate only one request to Google servers for better page loading speed.

Font 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/woff2 font types are accepted by Zephyr. To convert your font files to woff/woff2 types we recommend to use web font generators:

• Transfer
• Fontsquirrel

When you have the needed files, go to Zephyr > 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:

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 to the font selection option of theme elements.

You're able to use uploaded fonts in:

• Design settings of all elements
• Theme Options > Typography > Defaults (after page refresh)
• Theme Options > Typography > Headings (after page refresh)
• Theme Options > Buttons (after a page refresh)
• Theme Options > Fields Style (after a page refresh)
• any element via custom CSS:
  .your_element { font-family: Font Name; }