Reply To: Custom font and typography questions

Hello again,

I’ve added 2 custom fonts: rawline-400.woff (Rawline Regular) and rawline-400i.woff (Rawline Italic). I want to use both fonts as “Text Font” (body, paragraphs) so when I style something using italic HTML tag <i></i> or CSS font-style:italic I would get the real italic version (rawline-400i) and not fake italic (simply skewed Regular font).

Your screen 3.-advanced.jpg does not show which item you have assigned this font. Please insert the site credentials into the Private content below the text area I will test

I’ve selected rawline-400.woff (Rawline Regular) in Typography > Text Font (first option for body and paragraph font). And I’ve added rawline-400i.woff (Rawline Italic) in Advanced typography without any element/item assigned to it, so it would load globally, otherwise it won’t load at all. This is what it says in the info box at the end of the Typography section:

If you want to load additional font weights but don’t want to set them globally, go to Advanced Typography, add a new rule with your font-family and font-weight without assigning it to any of the elements. Then, you will have this font-weight loaded globally[…]

If I choose any Google font, I can select its Regular version (Normal 400) in Typography > Text Font and also load the Italic version (Normal 400 Italic) without assigning it to any items in Advanced Typography. That way, I can get real italic when styling an element with <i></i> or font-style:italic

But I can’t get this to work with custom fonts, because Google Fonts use a SINGLE font family name, and custom fonts are treated as individual fonts, even if they are from the same family.

Maybe a developer who handles typography could look at this thread?

In the meantime, I will try to use some custom CSS and load the fonts like in my examples in the .ZIP file from the previous post and see what happens… I know this could work if it works with Google Fonts and with with my simple HTML example pages.