Custom font and typography questions

Hello,

I would like to use this custom font here – https://www.cufonfonts.com/font/rawline
This is essentially Raleway from Google Fonts with some fixes.

Now, I have few quesitons:

1. On the help page the image shows the following file formats: .svg, .woff, .woff2, .ttf and .eot uploaded to the Media Library. On the Custom fonts page you have to select only .woff and .woff2. Do I need the .svg, .ttf and .eot files, too?

2. The font in question linked above (Rawline) has all weights from 100 to 900, including Italics. I want to add 400, 500, 600 and 700 Regular and in addition their Italic counterparts, so I can get real italic from the font file and not faux italic (simply skewed regular). I am not sure how am I supposed to add the two italic fonts on the Custom Fonts page. I can select Font-Weight, but nothing else.

3. Currently, on the Typography page, I am using Raleway and all styles and weights are showing in the dropdown menu, including Italic. I am using Raleway Normal 400 as a Text Font (body, paragraphs). Unfortunately, when I have italics applied to some text, it is faux italics – Woodmart is not using Raleway Normal 400 Italic – it is not loaded at all. Here is the code on my page:

`<link rel=’stylesheet’ id=’xts-google-fonts-css’ href=’https://fonts.googleapis.com/css?family=Raleway%3A400%2C600%2C800%2C500%2C700%7CMontserrat%3A400%2C600&display=swap&ver=6.2.0&#8242; type=’text/css’ media=’all’ />

As you can see, the italic versions are not loaded at all. Should I select them explicitly in the Advanced Typography (without assigning them to any elements?)

Hello,

1. On the help page the image shows the following file formats: .svg, .woff, .woff2, .ttf and .eot uploaded to the Media Library. On the Custom fonts page you have to select only .woff and .woff2. Do I need the .svg, .ttf and .eot files, too?

The current theme version requires only two file formats: .woff, .woff2

2. The font in question linked above (Rawline) has all weights from 100 to 900, including Italics. I want to add 400, 500, 600 and 700 Regular and in addition their Italic counterparts, so I can get real italic from the font file and not faux italic (simply skewed regular). I am not sure how am I supposed to add the two italic fonts on the Custom Fonts page. I can select Font-Weight, but nothing else.

Each font has its own set of styles: https://gyazo.com/50643b0a585dcc065d44fd6db2d3c897 and https://gyazo.com/472333aef217c0baf734ba674b1d8a68 If the font has 400, 300, 500 it would be presented in the drop-down list, if the font does not have these styles, them cannot generate them.

3. Currently, on the Typography page, I am using Raleway and all styles and weights are showing in the dropdown menu, including Italic. I am using Raleway Normal 400 as a Text Font (body, paragraphs). Unfortunately, when I have italics applied to some text, it is faux italics – Woodmart is not using Raleway Normal 400 Italic – it is not loaded at all. Here is the code on my page:

Here is the screen from the Google font, please copy this text https://gyazo.com/748a96690a383277c84e5da8cc3c69f3 and show how it looks like on your page, perhaps the language is not supported by the font.

You need to set the fonts in the Theme Settings > Typography or Theme Settings > Advanced typography. Please remove all the links you tried to add.

If you have any questions please feel free to contact us.

Best Regards

Please remove all the links you tried to add.

The code I quoted above is nothing I tried to add. This is the code that your theme is generating – I simply copied it from the “View Source” window to show that Italic fonts are not loaded at all if not specifically selected.

I added all the Italic font weights in the Advanced Typography tab, one-by-one, without assigning an element and the real Italic is showing now. Here is how the stylesheet is looking how:

<link rel='stylesheet' id='xts-google-fonts-css' href='https://fonts.googleapis.com/css?family=Raleway%3A400%2C600%2C800%2C500%2C700%2C400italic%2C500italic%2C600italic%2C700italic%2C800italic%2C900italic%7CMontserrat%3A400%2C600&subset=cyrillic-ext%2Ccyrillic-ext%2Ccyrillic-ext%2Ccyrillic-ext%2Ccyrillic-ext%2Ccyrillic-ext%2Ccyrillic-ext&display=swap&ver=6.2.0' type='text/css' media='all' />

I think this is not explained well-enough – I believe the theme should load the specified font weight’s italic subset (when available) by default and not force the user to add everything manually.

I will now try to add the custom font.

Please, explain this to me:

I want to add a Custom font to use for Text font (the first line in Theme Settings > Typography)

This custom font has both Regular and Italic version. So, in total, 4 files (with woff2):

rawline-400.woff
rawline-400i.woff
rawline-400.woff2
rawline-400i.woff2

The font contains Cyrillic Extended subset to support Bulgarian – I made a small page to demonstrate that (styling it with both italic tag and font-style:italic;)
You can view the code and test it for yourself from the zip file here:
https://drive.google.com/file/d/1K8gntV74PuEiN9SZYRcuOSHKEGipjqxp/view?usp=sharing

I uploaded those WOFF files (had to modify wp-config to allow unknown file types – you don’t mention that in the Docs) and began adding the fonts in Theme Settings > Typography > Custom Fonts.

Then, I set the new Custom font (Regular) as the default Text Font.

In Advanced Typography, I set the Italic version without assigning any elements, so it would load.

But when testing, I still get faux italic and Rawline Italic (rawline-400i.woff/2) is not used.

I am attaching screenshot to illustrate the process.

Please, tell me how to use Custom Font for the element and using weight 400 with both Regular and Italic versions working properly depending if you style it in italics or not.
This is possible with Google Fonts in the same way I’m doing it above. But when adding custom fonts, you can’t select Style (for example Normal 400 Italic), only Weight (Normal 400).

Attachments:

You must be logged in to view attached files.

Hello,

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.

Best Regards

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.

Hello,

Please, provide your site admin access (insert the site credentials into the Private content block under the message area) and page URL where I can see the problem.

Best Regards

When adding custom fonts, you can’t select Font-style: Italic, for example Normal 400 Italic like you can in Typography and Advanced Typography. Only the font-weight (100 to 900).

I’ll add login details to the private area below.

Attachments:

You must be logged in to view attached files.

Hello,

To upload the custom italic font you need to name it Rawline-italic for example and set its font weight. Don’t need to set font-style for the custom font (there is no such field there).
Then, go to Typography settings and select your recently uploaded Rawline-italic for desired option and set its font-weight as well as italic font-style.
So you need to set font-style in the Typography settings only and not in custom fonts section. But you should have a separate font for this style called Rawline-italic.

Kind Regards

[Author]

Posts