Typography

In the Typography menu you will be able to customize every option related to text, with custom settings for every kind of heading.

Typography

Global Typography

Here you can configure text options for the body text across your website. It is used for <p> tags and similar. Google fonts are supported. The available options are:

  • Font
  • Font weight & style (regular, bold, italics etc.)
  • Font size
  • Text color
  • Links color
  • Links color on hover
  • Underlined links: enable this to show links with the traditional underlined style

Heading typography options

For every heading from H1 to H6, you can separately configure the following options:

  • Font
  • Font weight & style (regular, bold, italics etc.)
  • Font size
  • Font color

Widget titles

Here you can configure the style of the titles of all widgets. Google fonts are supported. The available options are:

  • Font
  • Font weight & style (regular, bold, italics etc.)
  • Font size
  • Font color

Widget content

Here you can configure the style of the text showing in all the widgets. Google fonts are supported. The available options are:

  • Font
  • Font weight & style (regular, bold, italics etc.)
  • Font size
  • Font color

Additional Google fonts

If you can’t find your favourite Google font in the list, no worries, you can add it as well.

Please follow these steps:

a) Go to https://fonts.google.com/

b) Select the font you want to use (i.e. Roboto)

c) Customize the font as you wish by choosing the font weight and style you want to use.

d) Copy the href link from Google Font. It should be something like

https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&display=swap

Additional Google font

e) Visit your site and navigate to Appearance > Customize > YITH Theme Options > Typography > Additional Google Font

e) Paste the link into the text area.

f) Now navigate to Appearance > Customize > Additional CSS and add the following rule:

body {
font-family: 'Roboto', sans-serif;
}

Here is another rule example based on the Montserrat font (the Proteo default font)

body {
font-family: 'Montserrat', sans-serif;
}

Please note that this rule depends on the font you choose. Google Font helps you identify the right rule to use inside the “CSS rules to specify families”: