Matrix typography

open this page in a new tab

Google fonts

Select your font

Tutorial

The detailed tutorial with the screenshots

1. Select a font

2. Select the font styles

3. Copy the first line and paste it to "EDIT HEAD" area

4. Copy the third line and paste it to CSS. Click the 'save' button at the bottom.

Tip: If your template is using the same custom font for the global text, you need to paste the third line here as well, otherwise leave it blank

Open this page in a new tab

Any further questions?

Please ask here!

Comments: 5

#5
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?
#4
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;
}
#3
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
#2
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
#1
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.

Matrix themes

Close

Documentation Quick setup Select a color Select a font Shortcodes Helper classes Updates Enterprise package Help Showcase Marketplace