Typography Settings

Almost 1k font options with back-end live preview, with over 800 Google fonts and +150 FontFace Fonts included in Jannah, You will be sure to find the one that suits your needs.

You can choose your suitable font from the available four collections, Standard Fonts, Google Fonts, FontFace Fonts and embedded external font code.

Body Font Family

  1. Body Font Family This is the default font family for all elements all over your site unless you specify another font family for a specific element. After selecting the font source, the font family drop-down select will appear. Font family drop-down based on source drop-down select value.

Headings Font Family

  1. Headings Font Family this is the font family of important headings such as News blocks title, Posts titles at news blocks, posts title at sliders, widgets title and so on.

Primary menu Font Family

  1. Primary menu Font Family this is the font family of primary menu, parent links, submenus and mega menu elements.

Blockquote Font Family

  1. Blockquote Font Family this is the font family of block quotes at post content or any other places when using the shortcodes.

Source Option

For all the preceding typography sections, you can determine the source of the font

  • Theme Defaults: Use the theme defaults fonts.
  • Standard Fonts: Choose one of the system standard fonts.
  • Google Fonts: Choose one of the Google fonts, over than 800 fonts.
  • FontFace.me Fonts: Choose one of the FontFace fonts, over than 150 fonts.
  • Upload Custom Font: Here you can the files of your custom font, It supports different font formats, .EOT, .WOFF2, .WOFF, .TTF, .SVG.
  • Any external Fonts (e.g. Typekit): The font embed code, like this:

    <link href="https://fonts.googleapis.com/css?family=Amiri" rel="stylesheet"><br><br>
    	

Google Web Font Character sets

Tip: Choosing a lot of Character sets may make your pages slow to load.

Latin charset by default. Include additional character sets for fonts (make sure at http://www.google.com/fonts/ before that charset is available for the chosen font).

Font Sizes, Weights, and Line Heights

You can control the Font Sizes, Weights, and Line Heights for mostly all elements at the theme:

  •  body
  • Header Site name
  • Secondary Menu
  • Secondary submenus
  • Main Navigation
  • Main Navigation submenus
  • Mobile MenuBreaking News Label
  • Breaking News post titles
  • Breadcrumbs
  • Buttons
  • Post Categories Label
  • Single Post Title
  • Post Titles in Homepage Blocks
  • Small Post Titles in Homepage Blocks
  • Single Post Page Content
  • Blockquotes
  • Sections Titles: Default & Centered Styles
  • Sections Titles: Big Style
  • Blocks Titles
  • Widgets Titles
  • Post title in widgets
  • Copyright Area
  • Footer Widgets Titles
  • Post Heading: H1
  • Post Heading: H2
  • Post Heading: H3
  • Post Heading: H4
  • Post Heading: H5
  • Post Heading: H6
Font Weight Tips:
- If you use a google font, make sure to load the font weight in 'Google Font Variants' field that corresponds to the one in parenthesis here.
- Browser standard fonts in general support only 'Normal (400)' and 'Bold (700)' font weights.
You can add a new custom font, check this article for more info