Killed all Fonts by deactivating the Font Manger

Support
#1

I clicked on deactivatiogn Font Manger. Now Activiated the Font Manger.

But I cant find, were i can define the fonts. like h1 h2 h3 h4 h5 and other global fonts.

were can i define the fonts with the font manger?

#2

Hey there,

You can setup fonts in Pro > Launch > Templates. Then in Launch > Theme Options > Typography, you can choose your font template for Body and Content and Headings. There is no option to choose different fonts for each level of heading. The only setting that is available for each Heading is the Letter Spacing. This is because, it is not recommended to have different fonts for each heading for performance reasons.

If you wish to use different fonts, you’ll need to consult with a third party developer so he/she could take into account the performance of your site and see the best approach in handling and maintaining the fonts in your site.

Thanks.

#3

  1. What does “Stepped” mean?

  2. What is this?

FONT SIZE (XS)
FONT SIZE (SM)
FONT SIZE (MD)
FONT SIZE (LG)
FONT SIZE (XL)

Why can’t i define H1,H2, H3, span, p, and so on…

#4

Hello There,

Thanks for updating in! Stepped specifies a root font size at each breakpoint, which changes as soon as that breakpoint is triggered. This is part of the Responsive Typography feature of the theme. To fully understand all these settings, please check out this changelog for a more detailed explanation:
https://theme.co/changelog/#theme-pro-1-1-0
https://theme.co/changelog/#theme-x-5-1-0

Hope this helps.

#5

ok i understand this.

but there is only an option for floating text and letter-spacing for deadings.

were can i ser for example the fontsize of h1, h2, … on xs sm md lg xl…?

#6

Hi there,

It’s automatic if you use that setting and if you wish to change it per breakpoint then you’ll have to use custom CSS. Example, please add this CSS to your global custom CSS.

@media (min-width: 980px) { /* for desktop */

h1, .h1 {
font-size: 40px;
}

h2, .h2 {
font-size: 30px;
}

}

@media (max-width: 979px) { /* for tablet */

h1, .h1 {
font-size: 20px;
}

h2, .h2 {
font-size: 15px;
}

}

@media (max-width: 767px) { /* for mobile */

h1, .h1 {
font-size: 10px;
}

h2, .h2 {
font-size: 9px;
}

}

You can also use the combination of font-size : calc( 20px + 2vw); to apply font size, so even if you have 3 breakpoints here, the font size will still respond to device width changes. You can play with the values depending on your preference, first is the base size and second is the responsive size.

Thanks!

1 Like