[Resolved] One local font style implemented but multiple font weights offered for this font

[Jenny Dupuy]

Hey,

I based myself on this documentation: https://docs.generatepress.com/article/adding-local-fonts/

I performed these steps:
1 – On https://google-webfonts-helper.herokuapp.com/fonts, I selected the font Comfortaa, and only the style 300. I downloaded the comfortaa-v37-latin.zip then I uploaded the contents of the archive to /wp-content/uploads/fonts/.
2 – On https://google-webfonts-helper.herokuapp.com/fonts I copied the css code of the font.
3 – I copied the css in Customizer > Additionnal CSS and I changed the font-family name to “MyComfortaa”

/* comfortaa-300 - latin */
@font-face {
  font-family: 'MyComfortaa';
  font-style: normal;
  font-weight: 300;
  src: url('/wp-content/uploads/fonts/comfortaa-v37-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/uploads/fonts/comfortaa-v37-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/uploads/fonts/comfortaa-v37-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/uploads/fonts/comfortaa-v37-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/uploads/fonts/comfortaa-v37-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/uploads/fonts/comfortaa-v37-latin-300.svg#Comfortaa') format('svg'); /* Legacy iOS */
}

4 – In the Customizer > Typography, I added the font MyComfortaa, then I added also a Typography for h2 with MyComfortaa.
The font is correctly applied to h2 headings, and when I use the chrome extension WhatFont, I have well MyComfortaa as font family name.
But, in the dropdown list Font Weight in the Customizer > Add Typography, are available Regular, Bold, 100 to 900, where logically I should only have 300. And I can use these styles. I don’t understand why I have all these font weights.

If I use a child theme, it’s the same issue.

Thanks for help.

[Ying]

Hi Jenny,

Any chance you can link us to the page where we can see the H2 using the local fonts?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Jenny Dupuy]

Hi Ying,

I made a fresh installation of wp in 5.9 with :
– generatepress + GP premium (not activated for the moment)
– my generatepress child theme (installed but not activated)
– a “fonts” folder under “uploads” containing the Comfortaa font (300)

In Customizer > Typography, I have added MyComfortaa font and the typography for H2 with MyComfortaa. And the matching css in Additionnal CSS.

If you want, you can activate the child theme or GP Premium or both.
And you can modifiy the child theme.

I am available if you need more information.
Thanks for help.
Jenny

[David]

Hi there,

With a Locally installed font, GP has no way of knowing what weights are available for that font, so it lists all of them.
Whereas fonts from google, GP uses google fonts API and can tell what weights to list.

We are looking at ways to improve this.

[Jenny Dupuy]

Precisions about login

[David]

Did you see my reply here:

https://generatepress.com/forums/topic/one-local-font-style-implemented-but-multiple-font-weights-offered-for-this-font/#post-2123949

To cover:

But, in the dropdown list Font Weight in the Customizer > Add Typography, are available Regular, Bold, 100 to 900, where logically I should only have 300. And I can use these styles. I don’t understand why I have all these font weights.

This is the current expected behaviour. GP cannot tell what Font Weights are available to the Local Font and therefore lists ALL of them.

Is there any other issue ?

[Jenny Dupuy]

Hi,

Ok I understand that GP is not able to know what weights are offered (and this is not so bad), but when I choose a different weight than the installed font file, the weight is applied. What I don’t understand is how for example a 900 weight can be applied when the file is 300 weight?

[David]

When you select a weight the customizer will output the CSS: eg.

.your-element {
     font-weight: 900;
}

The browser checks the font – if the font weight isn’t available – it fakes it – its a faux weight.

[Jenny Dupuy]

Hi,

if there are fakes even in the fonts (or police in french), then where are we going?!

Ok I applied too much logical reasoning, there is a police file and it is used.
I didn’t think about the magic of css!

Thanks for all your answers

[David]

You’re welcome

[Author]

Posts