Highlighted

Font not rendering in apple devices

New Here ,
Jul 09, 2020

Copy link to clipboard

Copied

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?

 

Views

39

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Font not rendering in apple devices

New Here ,
Jul 09, 2020

Copy link to clipboard

Copied

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?

 

Views

40

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 09, 2020 0
Adobe Community Professional ,
Jul 09, 2020

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
Adobe Community Professional ,
Jul 13, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2020 1