Site logo

Archived topic

Google Font problem on IPHONE browsers

14 replies · Started by Shield one, on October 19, 2018

Viewing posts 1–15 of 15

Hello,

i am using GP Premium with Elementor Pro, everything works correct, but in iphone browsers (Safari, Chrome) are fonts incorrect. One of them are different letter spacing, and second one have different font family. I am using google fonts. I tried it also in some online iphone browser emulators, but there its ok.

I found problem, not all font weights are imported from google. It is possible import all weights at once?

I tried

add_filter( 'generate_typography_customize_list', 'lh_add_google_fonts' );
function lh_add_google_fonts( $fonts ) {
    $fonts[ 'Montserrat' ] = array( 
        'name' => 'Montserrat',
        'variants' => array( '200', '300', '400', '500', '600', '700' ),
        'category' => 'Sans-serif'
    );

    $fonts[ 'Playfair Display' ] = array( 
        'name' => 'Playfair Display',
        'variants' => array( '200', '300', '400', '500', '600', '700' ),
        'category' => 'Sans-serif'
    );
    
    return $fonts;
}

but it was not working for me

Do you have all of your needed variants selected in the Customizer under the font family dropdown?

Hello, yes but there i can select only 7 weights. Because there is settings for paragraph and H1 - H6. So is there way to load more than 7 variants of weight? I have two fonts and for both of them i am using 300,400,500,600,700 weight.

A font only has as many variants as it comes with.

If you're using a font with 7 variants, then make sure all of them are selected. Then within the actual fonts you can select the font weight.

Hello, but how cas i select more than 7 font varianty through customizer ? (in customizer i can select only 7 fonts varianty) That was my question. Or is there any other way how to do it ?

You can only select the variants that the font has. Some fonts have 10+ variants, some only have 1.

If there's a variant you want to select for a font that you can't choose in the Font Weight option, you can use CSS. Let me know if that's the problem.

Hello, tom that is what i understand. I know that no each font has all weights. I also know that i can change font family and also font weight in css.

But my problem is, that i want use more font weights in css than i am able to set in customizer > typography. And than, font weights are not loaded from google. So when i set some font weights, which is not used in customizer > typography (because of there is no more space to set another font weight) it is not working of course.

When you say "there's no more space", where are you trying to add another font weight? Within the "Variants" field? If so, those are populated automatically with the variants made available by Google Fonts. Adding custom values in there wouldn't do anything unless the font actually supports the variant.

Let me know if I'm misunderstanding.

Hello,

it seems that you are still not understand me. Maybe because of bad english, or wrong explanation.

So I will try it again. In customizer user can set default font families and weights for 7 html elements. For:
- <p> - paragraph
- and <h1> - to <h6>
So together i can select 7 different font families and weights. But what if i want set in CSS more than these 7 font family and weights combination. Then when i set it in css, it is not working because in html header i can see this (which are setted in customizer):
http://fonts.googleapis.com/css?family=Montserrat%3Aregular%2C300%2C500%2C600%2C700%7CPlayfair+Display%3Aregular%2C700&subset=latin-ext&ver=4.9.8

So when i am trying Playfair Display 900 in css, it is not working. But i cant set another one in customizer.

I hope that now its clear. And sorry for trouble.

No worries - sometimes it's hard to convey complicated issues over forum/email. We'll get there!

So let's take your Playfair Display example.

When I choose that font, I'm given 6 variants I can use: http://prntscr.com/l967jp

As long as 900 (for example) is selected in the list, I can use it in my "Font weight" option (or in CSS).

Basically, having a variant selected makes the call to Google to include that font when viewing the site.

In your example above, only regular and 700 are selected.

Hi, thanks for screenshot, i think that it solved my problem. Please where is this settings? Because till now, i tried set it on different place, here: https://prnt.sc/l9bmqa and there is no option to choose more than one weight.

So lesson for me, screenshot first, then words.
Thanks.

That screenshot isn't from the GP settings. It may be a plugin you're using?

My screenshot is from "Customize > Typography".

Hello, yes you are right and i was watching somewhere else. (it was also customize > typography - i had two typography in customize) Problem solved, it was some plugin, which was installed by my colleague. Sorry for wasting your time, and thank you very much.

No worries! Glad I could help :)

This archived topic is closed to new replies.