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

Once you activate custom layout, in admin panel will appear the old style tab icon once used in all Jimdo templates.

Clicking the style tab in Admin mode, 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"

- Select your font

- Select the style

- Copy the first link and paste it to the area "Edit Head" ( you can use more than one font )

- Add the third link to CSS

You can customize the font-weight or text-transform for your own preference.

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

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:

         <div class="global-colors brand-bg brand-link custom-text">

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

body .custom-text, .custom-text p, .custom-text table, .custom-text td {
   font-family: 'Poppins', sans-serif;
}

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.