[Loren NParticipant]

Hi,

I have used a google font (architects daughter) against some custom headlines within cornerstone. All show nicely on desktop devices. However, some (not all!) do not show the correct font on mobile or iPad. The homepage uses custom headline to show titles. Here’s the page >> http://www.sdmtest1.co.uk. This page also looks fine on mobile.

But on this page >> http://www.sdmtest1.co.uk/shop-by/ although it shows fine on desktop, the mobile view does not show the right font.

What am I missing?

[RupokMember]

Hi there,

Thanks for writing in! Would you clarify how you have added the font? Did you use the Custom Font option from Customizer or loaded any other way?

It seems on your page (http://www.sdmtest1.co.uk/shop-by/) the font is not architects daughter rather a cursive fallback font from the system – http://prntscr.com/91yf9r

The font is working on other page and it looks like – http://prntscr.com/91yfjp

As the font is not loaded properly on shop page, it’s showing a cursive fallback from system. Since the system fonts in Computer, Tablets and Mobile will vary so you might see different type of fonts.

So make sure you are loading the font correctly for all pages.

Hope this makes sense.

Cheers!

[Loren NParticipant]

I’ve used the same method for the custom headline on each of the pages. Don’t know why they would be different.

I’ve entered this code in the style section for the custom headline (same on each page).

font-family:’architects daughter’,cursive;

This font is only used in certain places so didn’t want to set it using customiser.

How can I fix this?

[Paul RModerator]

Hi Loren,

Try adding the code below in your custom > css in the customizer

@import url(https://fonts.googleapis.com/css?family=Architects+Daughter);

Then add this in the style field of the element you want to change the font

font-family: 'Architects Daughter', cursive;

Hope that helps.

[Loren NParticipant]

Yay!! That did it! Thank you so much!

[Prasant RaiModerator]

You are most welcome 🙂 .

[Loren NParticipant]

Hi,

This worked before Christmas but has now stopped working. I haven’t added anything else to the site at all (just updated X). Can you help?

[RupokMember]

Hi there,

Thanks for updating. I can see the font is working fine on my end – http://prntscr.com/9n73lp

Please check again clearing your browser’s cache. Also you can try the font name correctly (not all lowercase) –

font-family: 'Architects Daughter', cursive;

Cheers!

[Loren NParticipant]

Hi,

No this didn’t work. Still wrong on both my iPhone and my iPad.

[RupokMember]

Hi there,

Thanks for writing back. I have checked again and noticed it’s still working fine however you didn’t update the naming yet – http://prntscr.com/9xnhw1

Since the font is loading fine and showing correct on my end, I am not sure what should I suggest you right now. You can try from different mobile device after correcting the naming as suggested.

Cheers!

[Loren NParticipant]

Still not working. I’ve corrected the name (to caps where applicable).

I’ve tried taking it out of the style field on the individual element and placing it in the custom css section for the page and that doesn’t work either.

[RupokMember]

Hi there,

Thanks for updating. Still I can’t see the correct naming. Are you using any cache plugin or CDN that might delay the update? Also could you attach a screenshot of what you are seeing on your mobile device?

Cheers!

[Loren NParticipant]

Hi,

You’re right. On this particular page, I hadn’t put the caps in. I have now – but still not working.
The page I’m checking is http://www.got2jot.co.uk/shop-by/

I’ve attached a screenshot from my iPad.

[LelyModerator]

Hello Loren,

Upon checking, what works on your site is the cursive font and not the Architects Daugher font.
Please change this:
@import url(https://fonts.googleapis.com/css?family=Architects+Daughter);
To this:
@import url(//fonts.googleapis.com/css?family=Architects+Daughter);

Hope this helps.

[Loren NParticipant]

No, still doesn’t work. That just stops the cursive style. It still doesn’t show the actual ‘Architects Daughter’ font.

The strange thing is, that I have the same font styling on the home page (as a custom headline – just the same) and it works perfectly!

I don’t understand it.

[Author]

Posts