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
General font settings
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
Typøgraphy
Updated 21/08/2017
CSS customization
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
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
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;
}
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.
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE
Matrix themes (Monday, 06 January 2020 11:09)
@Steph no, only google fonts
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
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
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
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
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?
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
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