Hello,
I am looking for some advice regarding a discrepancy in font styles between devices. I have manually changed some select words and headings throughout my website using html, and it all works fine on my PC, however, when viewing the site from literally any other device it defaults to a completely different font. Am I doing something wrong in the coding? Or is there an issue with other devices not having the font installed? Or something else?
The font in question is “Italianno”, it is a cursive font which is available on google fonts.
Image of one of the headings as viewed on my screen:
Code used to alter text properties:
- Corporate Gallery -
Same heading as viewed on a different device:
Inspecting element on website from other device:
As you can see, Italianno is still identified there despite showing up as a different font (not sure whether or not that makes a difference though?)
If it is simply an issue of the font not being installed, is there a work around to this? Or do I just have to choose something more common?
Thank you for reading.
Kind regards,
Alex.
Hi, @ManukaFlowers
Welcome to the Shopify Community! Thanks for reaching out about this. I can share a little bit about what I believe may be happening.
Italianno is likely a font that must be downloaded onto a visitor’s computer before it is displayed. Therefore, it can cause slower load times. Times New Roman, or another basic font, is often used as a default back up font when the desired font can’t be downloaded. Perhaps, if your website is taking too long to load, it is reverting to a default font on some devices or browsers.
To avoid downloading a new font to your customer’s computer, one solution is to use a system font. A system font is a font that is already installed on most computers, which decreases the likelihood of any loading issues or back-up fonts being used. There is more about this on our Help Center under Fonts. This is the same solution as what you mentioned, “choose something more common”.
You can also look at your Online store speed report to see what speed your store is loading at. If it is quite slow, I recommend running through any suggestions that are displayed in the speed test, as well as our help document Improving your online store speed to see if you can improve it. This may help with your font loading on users’ devices.
That being said, coding advice is outside my scope of support, so hopefully another Community user will be able to comment on this and provide any further insight.
Let us know how this goes!
