Everything you need to know about the typography in Matrix themes. How to customize the text, headings and font style of all custom elements
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
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':
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.
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
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:
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:
<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;
}
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.
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