Google font not working on mobile

Support
#1

Hi,
I’m using some Google Fonts (Open Sans, Montserrat, etc). In this pages http://www.giacomodenanni.it/approfondimenti/modelli-clinici-riferimento I’ve changed some text font with css code “font-family”. It works on desktop, but it doesn’t on mobile. I can’t uderstand why this is happening. I also cleaned up the SiteGround’s SuperCacher of my domain, but nothing has changed.
How can I fix this?

Thanks!

#2

Hello There,

Thanks for writing in! Open Sans will not work because it is not loaded in the page. To resolve it, please add the following CSS line of code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Hope this helps. Please let us know how it goes.

#3

Hi,
I did what you wrote, but it didn’t work. I still have the same issue.
Also, if I want to upload more than one font, how do I have to write the code? Just add another line like this one, but for the other font?

I’m using Pro.

Thanks again!

#4

Hi There,

Since you are using PRO, no need to add that CSS. Go to Pro > Launch > Templates > Fonts Add opens there so it will be loaded.

#5

I already did that, that’s why I wrote to you. I did the same things for the other pages, but this time I’ve got this issue. What can I do?

I posted a secure note with my credentials, if you need them…

Thanks!

#6

Hi There,

The Theme will only request the font that you did actually used (not just being assigned on the Template > Fonts). I don’t see that you used the Open Sans nor Montserrat on the Theme Options > Typography options and none of your element on the header using it either. So yup the site is not requesting the Open Sans nor Montserrat from Google.

Please follow this thread on how you can request Google Font on your site. Add all your needed fonts and Google will generate a one line @import statement for all of those fonts.

Hope it helps,
Cheers!

#7

Hi,
thanks again. In the first way I wasn’t able to make it working, when I wrote the lines in the tread in the Global CSS or in the Style.css of my Child theme.
It works only when I put the codes in the CSS sheet of the specific page. Why this is happening according to you? This happened only with this page (http://www.giacomodenanni.it/approfondimenti/modelli-clinici) and not with all the other pages. I can’t explain it to myself according to what you wrote in previous posts…

At least my issue is solved!

Thanks!

#8

Hi There,

I wish I could give you an explanation about that, but I don’t know the whole process you did. Possible it’s a persistent caching causing the issue.

What I know is the @import statement does not work on Customizer > Global CSS or Theme Options > CSS, because if you put it there it won’t be output on the top of all other CSS.

Unlike if you place it on the Specific page CSS or child theme’s style.css it will be output as is.

I’m glad that the issue is solved.

Cheers!

#9

Thanks for the explanation!

#10

You’re more than welcome, glad we could help.

Cheers!

#11

Let us know if you need further assistance regarding this matter.

#12

No, thanks, I managed the issue adding the @import code in the CSS section of the specific page.

Thanks for your help!

#13

Hey There,

You’re most welcome. We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Cheers.