Starting from 2021, all Matrix Themes by default are using system font stack that you will find in CSS like this:
body .has-custom-text, .has-custom-text p, .has-custom-text table, .has-custom-text td,.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 ul.slimmenu li a,ul.slimmenu.g-font li a,.g-font .matrix-hero,.g-font ul.nav li a,.g-font .hs-menu ul.nav li,.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 .comment:link,.g-font .j-blogarticle .comment: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 figcaption{
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
However, you can change the font for your own preference and add a Google font.
Here's a new tutorial about using Google fonts hosted on Jimdo server:
1. On the top of your CSS add Google Font using the @import:
@import url("https://fonts.jimstatic.com/css?family=Poppins:400,500,600,700,700italic&subset=latin,latin-ext,cyrillic-ext,cyrillic");
2. Go to typography section of CSS and change the default font family:
body .has-custom-text, .has-custom-text p, .has-custom-text table, .has-custom-text td,.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 ul.slimmenu li a,ul.slimmenu.g-font li a,.g-font .matrix-hero,.g-font ul.nav li a,.g-font .hs-menu ul.nav li,.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 .comment:link,.g-font .j-blogarticle .comment: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 figcaption{
font-family: 'Poppins', sans-serif;
}
Please check the official Google Fonts library website to select your font.
If you're using the Google Fonts in Edit Head section, you can easily change a part of url link and host the font on Jimdo server
<link href='https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700' rel='stylesheet' type='text/css'>
Jimdo
<link href='https://fonts.jimstatic.com/css?family=Poppins:300,400,500,600,700' rel='stylesheet' type='text/css'>
In admin menu, navigate Design> Font Settings and here you setup the following elements:
Please ask here!
Marc (Saturday, 14 December 2019 12:34)
Thank you very much, Serhiy, This worked good! :-) ...
is it also possible to show more than 4 columns in Megamenu? How do I do that?
Serhiy (Thursday, 12 December 2019 11:24)
@Marc in CSS add text-transform:lowercase to the following block:
.hs-menu .j-nav-variant-nested > ul > li > ul > li > ul {
display: block;
padding: 0;
margin: 10px 0 0;
text-transform:lowercase;
list-style: none;
box-sizing: border-box;
}
Uppercase Font in Megamenu (Thursday, 12 December 2019 09:27)
Hi, Serhiy,
in Megamenu the font is used as "uppercase". For the second level (the headings in Megamenu) this is ok. For the third layer I would like to use normal font, so no uppercase. Where can I set this?
Thank you very much
marc
Serhiy (Tuesday, 07 August 2018 17:24)
@Michael you can set up the global text size in Design> Font Settings.
The size in navigation can be changed directly in HTML ( Design> Custom template> HTML) using the helper classes size-11, size-12, size-13 etc
Michael (Tuesday, 07 August 2018 11:31)
Where do you change the font size for the entire page? I would like the font in the navigation as well as in the text etc 2 pt bigger.