Font Options

Here you will set all font family from 600+ Google fonts, font size, font variant used into the site. This is a super powerful feature; easy to play with.

Fonts from Google

In this section you will choose which font is assigned to which element. You also need to choose one or more variations : styles such as bold and italics have their fonts.

Examples:

Choose a font for paragraphs. We will take for example the font Roboto because it offers several variations: Choose as font for paragraphs Roboto. Once loaded you will see example display on the right.

<image missing>

Now next to Variants you will see Regular which is the mandatory style for any font. So that the text in bold and italic appears good in your website, you should choose the corresponding variants. In this case select the 300, 300 Italic, 700 and 700 Italic. We intentionally deviating the Regular style that we do not like so much.

Note

Many police place has only mode Regular. Bold and italic will therefore rendering random manner following browsers.

Choose a Variant as default

Once several variants displayed a new menu item appears below, to choose which version to use by default. In this example if we select 600, all paragraphs will be displayed in bold. If we select 300, all paragraphs will light mode, what we want, so select it.

The ‘Subsets’ are only used for some languages, if you need select the ones that suit you.

Font size

Here you can adjust the size of each element typography.

Font Variations

Select any item in this section to capital. This style is often appreciated for h4, h5, h6.

Responsive text

In this section, you can choose to calculate different font sizes for the different screen sizes. The ratio for widescreen multiply the size as said split tablet and phones.

Example:

Note

For paragraphs, we select a size of 16px.

Ratios:

Wide screen: 16 * 1.2 = 19px

Tablet: 16 /1.2 = 13px

Phones: 16 /1.3 = 12px

If 1 is selected, no change will be made in sizes chosen in the section “Font size” above.

Global page Font -
This font is used on all elements except those below
  • type : font
  • default : Roboto
  • id : p
Fonts for alternate text -
Choose a font for the alternate class (available in the WYSIWYG editor)
  • type : font
  • default : Pacifico
  • id : alternate
Fonts for Titles level-1 -
H1
  • type : font
  • default : Roboto Condensed
  • id : h1
Fonts for Titles level-2 -
H2
  • type : font
  • default : Roboto Condensed
  • id : h2
Fonts for Titles level-3 -
H3
  • type : font
  • default : Roboto Condensed
  • id : h3
Fonts for Titles level-4 -
H4
  • type : font
  • default :Roboto
  • id : h4
Fonts for Titles level 5 -
H5
  • type : font
  • default : Roboto
  • id : h5
Fonts for Titles level 6 -
H6
  • type : font
  • default : Roboto
  • id : h6
Fonts for small tags into heading -
You can add rythm to your heading by adding a \ tag into it
  • type : font
  • default : Roboto Condensed
  • id : small

Fonts size

Choose font-size in pixels for elements.

Paragraph size is defined in the Theme Customization Panel This option is only defined in the theme customization

H1 -

  • type : range
  • default : 50px
  • id : h1_size

H2 -

  • type : range
  • default : 35px
  • id : h2_size

H3 -

  • type : range
  • default : 25px
  • id : h3_size

H4 -

  • type : range
  • default : 20px
  • id : h4_size

H5 -

  • type : range
  • default : 17px
  • id : h5_size

H6 -

  • type : range
  • default : 16px
  • id : h6_size

‘Lead’ class -

  • type : range
  • default : 14px
  • id : lead_size

‘Alternate’ class -

  • type : range
  • default : 0.8em
  • id : alternate_size

Fonts size (in em) for small tag in titles -

  • type : range
  • default : 0.8em
  • id : small_tag_size

Font variation

Make H1 uppercase -

  • type : toggle
  • default : Off
  • id : h1_upp

Make H2 uppercase -

  • type : toggle
  • default : Off
  • id : h2_upp

Make H3 uppercase -

  • type : toggle
  • default : Off
  • id : h3_upp

Make H4 uppercase -

  • type : toggle
  • default : On
  • id : h4_upp

Make H5 uppercase -

  • type : toggle
  • default : Off
  • id : h5_upp

Make H6 uppercase -

  • type : toggle
  • default : Off
  • id : h6_upp

Responsive text

Size above are used on regular display (between 980px & 1200px). To keep proportionalities, fonts are tailored to bigger & smaller screens with a ratio. You can adjust the ratio if the result does not satisfy you on your tablet or phone.
Ratio for bigger desktop screen (more that 1200px) -
I think the most popular screen size
  • type : range
  • default : 1.24
  • id : wide_ratio

Ratio for Portrait tablets -

  • type : range
  • default : 1.3
  • id : w724_ratio

Ratio for Phones & tablets -

  • type : range
  • default : 1.3
  • id : full_ratio
Text minimum limit. -
This option prevent to have too small text on tablet or mobiles.
  • type : range
  • default : 12
  • id : size_minimum

Original reference: web.archive.org page