Font not rendering in apple devices

[SP07cats]

Can anyone tell me how to fix a problem I have with my website please.  I have designed it using the century gothic font which works fine on pc but renders as times new Roman on apple devices.  Ofcourse my font is set to century gothic on my style sheet.  Is there any coding I can include to override apple changing it to TNR?

[BenPleysier]

Although you say that the font works on a PC, it will not work on my machine because I do not have the font installed. There are a number of web safe fonts that will be available on the clients' machines, Century Gothic is not one of those.

To install the font for your site, Google the subject or have a look at https://www.w3schools.com/css/css3_fonts.asp and/or https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website

[Jon Fritz]

When using fonts online in their most basic form, anything that isn't installed on a user's computer, simply cannot show. This is why the "font-family" CSS attribute was created, to give a list of acceptable fonts (in the designer's view) where the viewer's computer uses the first installed font from the list.

There are lists of "web-safe fonts" out there that give families of the most often installed fonts across all devices, but they generally don't take any mobile device into account. Even the old "web-safe" lists tend to break in Android and iOS. 

That's where Ben's post comes into play. Essentially, what you're doing is giving the user's browser a link to a font file stored online to use while on your site, rather than needing the font to be installed on their system. It's a fairly well supported method of getting the fonts you want into your site and viewable by a large portion (not all) of your viewers. 

Old browsers are still an issue, though only a few % will be using them, so make sure you still have fallbacks in your font-family list, so if they can't see a specified webfont, at least they'll be able to see something close, chosen by you from the web-safe lists.