Everything you need to know about the typography in Matrix themes. How to customize the text, headings and font style of all custom elements

*** Updated 21/08/2017

Clicking Font Settings in Design menu, you can customize the following elements:

Text: It's font style size and color.

Headings: the headings size and color of content area.

Links: the global link color which should match with the main accent color of your website. In CSS it can be identified as /* color 1 */

Horizontal line: the color of horizontal line in content area

The headings and other main elements are using Google font that can be customized in CSS ( designs>custom layout>CSS) and find the section 'typography':

As you can see from the screenshot, here you can change the font name, text transform and letter spacing value

Click in admin mode the button "Matrix themes" and then "Select a font". Then you will find a detailed tutorial

Instead of external Google font gallery, you can use the Headings styles from Jimdo. All you have to do is remove the font name from CSS and then choose the font from default Jimdo Style tab.

The advanced options for the font style will allow you to choose the right font-weight for each element of your website.

In your CSS you will find the helper classes:

.weight-300 {font-weight:300!important;}
.weight-400 {font-weight:400!important;}
.weight-500 {font-weight:400!important;}
.weight-600 {font-weight:400!important;}
.weight-700 {font-weight:700!important;}
.weight-800 {font-weight:800!important;}

Here's an example of using font-weight inside Widget/HTML:

        <h1 class="weight-700">
           This is the heading text
        </h1>
       

Please check all helper class that can be used for your typography:

• weight-600 (weight-700, weight-800 ...)
• center-align
• left-align
• right-align
• uppercase
• lowercase
• g-font
• no-g-font
• big
• super-big

The same way the font-weight can be applied for the global text directly in HTML:

        <p class="weight-500">
           This is a simple text
        </p>
       

In text editor you can use  the button "Bold" too

Usually, for the global font text of your website, you will need to use the options of Jimdo style tab. If the font you'd like to use is not available in default list, here's a tutorial how to add it manually:

1) Add helper class 'custom-text' to HTML like shown below:

2) Add the name of your font and it's style to CSS:

Find in CSS the following section and identify h1 or h2

/*** Web fonts ***/
.g-font h1,.g-font h2,.g-font h3,.g-font h4,.g-font .j-nav-variant-nested,.g-font .j-nav-variant-standard,.g-font .j-nav-variant-breadcrumb,.cc-page .g-font .slicknav_nav a,.g-font .matrix-hero,.g-font a.readmore,.g-font .j-product .cc-shop-product-desc .cc-shop-addtocard,.g-font #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout,.g-font #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn,.g-font .j-blogarticle .blogreadmore:link,.g-font .j-blogarticle .blogreadmore:visited,.g-font .j-blogarticle .comment:link,.g-font .j-blogarticle .comment:visited,.g-font .post .blogreadmore:link,.g-font .post .blogreadmore:visited,.g-font .post .comment:link,.g-font .post .comment:visited,.g-font .commententry input[type="submit"],.g-font .j-formnew input[type='submit'],.g-font .j-downloadDocument .cc-m-download-link,.g-font .j-newsletterbox input[type='submit'],.cc-pagemode-overlay .g-font input[type="submit"].submitUser,.g-font .j-rss br+a[target="_blank"],.g-font input#mc-embedded-subscribe.button,.g-font a.j-calltoaction-link.j-calltoaction-link-style-1,.g-font a.j-calltoaction-link.j-calltoaction-link-style-2,.g-font a.j-calltoaction-link.j-calltoaction-link-style-3,.g-font .hs-button,#hs-container span.fn,.g-font .cc-catalog-wrapper span a,.g-font div.caption.cc-m-image-align-3,.g-font .cc-imagewrapper.cc-m-image-align-3 figcaption{
    font-family: 'Poppins', sans-serif;
}

Add the alternative font for your headings like this:

/*** only for h2 ***/
.g-font h2 {
    font-family: 'Open Sans', sans-serif;
    text-transform:uppercase;
    letter-spacing:1px;
}

Make sure the font you added to your website, has the same weight value available in style option

At the moment  you can use external font that available only in Google library.