Google fonts problem


#1

Hi,

I’m trying to use the Alegreya SC Google font in italic (Alegreya+SC:700italic) as a Heading font (in Customisation > Fonts > Headings Fonts) and it renders fine in Firefox, but not in Safari or iOS.

I don’t know where the problem lies, but do you know of any italic Google fonts that should work in Safari and iOS?

Many thanks,

Phil


#2

Hi,

Can’t really recommend a font as I don’t know what you would like. But most of them should work without issues in Safari.


#3

Hi Vlad,

Thanks. I’ve tried:

Alegreya+SC:700italic
Ubuntu:700italic
Open+Sans:700italic
Lato:400italic

…and a few more the other day I forgot to write down.

Is there anything in the code that will prevent Google fonts rendering in Safari or iOS? Can you think of one font - anything - that does render in italic in this theme?

Many thanks,

Phil


#4

Hi again,

Well, the theme doesn’t actually render the fonts, it just loads them and assigns them where they need to be.

Did some testing and it looks like it’s a general webkit issue (Safari, Chrome, Safari on ios etc) that the font isn’t applied as italic even if you only load italic. But it’s easy to overcome by setting the italic style explicitly.
Use a custom CSS plugin and add this please:


h1, h2, h3, h4, h5, h6 {
     font-style: italic;
}

If you have other elements you need it for let me know


#5

Thank you Vlad, that’s great!

Yes, I’d like to add it to the menus too, if possible?

All the best,

Phil


#6

Okay, change the code to this please:


h1, h2, h3, h4, h5, h6, #mainnav ul li {
     font-style: italic;
}


#7

Awesome! Thanks for your help, Vlad, I appreciate it.

Phil