Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
    17. April 2015

    Matrix themes - Typography Options

    Matrix themes support

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

    General font settings

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

    Text: the global text size and color.

    Headings: the headings size and color.

    Links: the global link color which should match with the main accent color of your website.

    Horizontal line: the color of horizontal line in content area

     

    CSS customization

    The headings and other main elements are using Google font that can be customized in CSS

    ( design> custom template> CSS ) and find the section 'typography':

    How to change Google font

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

    Using Jimdo font gallery

    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.

    Tip!

    If you remove all custom font style in CSS, your navigation and some custom elements will have the same style as you choose for the global text of your website

    Advanced Font customization

    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

     

     

    Font weight for a simple text

    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

    FAQ

    How can I add custom font to a simple text?

    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 has-custom-text">

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

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

    How to use different font style for h1 and h2

    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;
    }

    The font style looks blurry

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

    Web font is not listed in Google library

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

    tagPlaceholderTags: tutorials
    Comments: 8
    • #8

      Matrix themes (Monday, 06 January 2020 11:09)

      @Steph no, only google fonts

    • #7

      Steph (Monday, 06 January 2020 11:07)

      Hello,
      Is there any way to use an Adobe web font (Karmina - https://fonts.adobe.com/fonts/karmina) instead of a google web font for my website?

      Best,
      Stephanie

    • #6

      Serhiy (Thursday, 19 December 2019 12:47)

      @Kathi the font of navigation and headings can be edited in CSS as 'brand fonts'. For the details, please check the section "quick setup" in Matrix Themes menu

    • #5

      Kathi (Thursday, 19 December 2019 11:24)

      Hi Serhiy,
      how could I change the font of navigation?
      Thanks in advanced for your support! Thanks, kathi

    • #4

      Serhiy (Friday, 16 October 2015 17:29)

      Hi Tobias,
      you can use the helper classes in HTML only once for each section, otherwise add your own styles in CSS.
      If you have purchased one of the Matrix themes and need support or further information, please fill out the form from the page http://www.matrix-themes.com/support/

      Best,
      Serhiy

    • #3

      Tobias (Friday, 16 October 2015 12:11)

      And what is about having tow fonts for headlines to choose from. So I can have one font for headlines in the blog and an other headline font for the rest of the homepage?

    • #2

      Serhiy (Thursday, 15 October 2015 19:06)

      Hi Tobias,
      the sections where you can control the font style ( i.e. using 2 different font styles for headings) are: header, navigation, content and footer

    • #1

      Tobias (Tuesday, 13 October 2015 16:29)

      Hello,

      thank you for your descriptions.
      How about having two styles of fonts. One for the main page and another one for the Blog or shop? How to manage this?

      Thanks,
      Tobias

    SUPPORT

    • Blog
    • Support center
    • Tutorials
    • Common Support issues
    • Updates

    QUICK LINKS

    • Advanced Style Editor
    • Features
    • Pricing
    • Pre Purchase Questions
    • Marketplace
    • Zødiac Framework
    • Jimdo Creator

    WIDGETS

    • Instagram feed
    • Team Showcase
    • Animations
    • Parallax widget
    • Full width widgets
    • Countdown Timer
    • All Widgets

    GET INSPIRED

    • Showcase
    • Custom widgets
    • Enterprise Package
    • No coding features
    • Matrix variables
    • Dolphin Block Elements
    hide-in-doc-page

    Showcase
    draggable-logo

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
    has-center-nav g-font
    navigation styles
    size-15 weight-400 snip-nav is-uppercase --line01
    content styles
    form-white
    footer styles
    o-form  color-white
    Typography
    Heading H1
    weight-600 is-uppercase
    Heading H2
    weight-600 is-uppercase
    Heading H3
    weight-600 is-uppercase
    Buttons
    weight-600 is-uppercase
    Animations
    none

    Note:
    All changes made here will be applied to your entire website.
    is-switcher admin-only

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

    About | Privacy Policy | Cookie Policy | Sitemap
    Copyright © 2022 All rights reserved
    Log in Log out | Edit
    • Scroll to top
    Close