Font is not loaded under iOS

[windata_Marketing]

Hello, everybody,

I have added the Fieldwork font to my website.

Firefox, Chrome, Opera, Android, Brave... All browsers display it correctly, except Safari (PC or Mobile).

I already tried everything you posted in your "help". Unfortunately unsuccessfully.

In the web console of an older Safarie console I get the following message:

"Resource was interpreted as font, but transferred with MIME type application/font-woff."

You can follow the behavior at www.konfipay.de/indexnew.asp yourself.

The font was integrated via @Import.

Thanks for your feedback.

Niko

[liz, Adobe Type]

Hi Niko,

I'm sorry that you ran into trouble with this. The fonts are not displaying correctly in Safari because the italic font style isn't set in the website CSS. Some browsers will detect the style from the single font file and automatically apply it, while others (Safari, especially) always need the style to be specified in the CSS.

If you add a font-style rule to your CSS anywhere you are using the web fonts, it should start working across all browsers and platforms:

font-style: italic;

For the main page headline, for example, you could set the italic style here (in the style.css file):

h2 {
font-family: "fieldwork", sans-serif, Verdana;
font-weight: 600;
font-style: italic;
color:#009EE3;
text-transform: uppercase;
font-weight: lighter;
}

Please give that a try, and let us know if you have any other questions,

-- liz

[nik0_0kin]

Hello Liz,

thanks for your answer. Now it also works in safari. This is completely new to me.

Thanks again and have a great week
Niko

[nik0_0kin]

Okay, I'm afraid there are still font issues.

I import 5 fonts. But only two of them are recognized correctly.

The code directly from you is:

/*Fieldwork Italic DemiBold*/
font-family: fieldwork, sans-serif;
font-weight: 600;
font-style: italic;

/*Fieldwork Hum Hair*/
font-family: fieldwork-hum-hair, sans-serif;
font-weight: 100;
font-style: normal;

/*Fieldwork Hum Light*/
font-family: fieldwork-hum-light, sans-serif;
font-weight: 300;
font-style: normal;

/*Fieldwork Hum Regular*/
font-family: fieldwork-hum-reg, sans-serif;
font-weight: 400;
font-style: normal;

/*Fieldwork Hum Bold*/
font-family: fieldwork-hum-bold, sans-serif;
font-weight: 700;
font-style: normal;

In the @import file the fonts are named differently. I suppose this is the source of the problem:

[liz, Adobe Type]

Hi Niko,

Where did you get the CSS you mention as "code directly from you"? Such as:

/*Fieldwork Hum Bold*/
font-family: fieldwork-hum-bold, sans-serif;
font-weight: 700;
font-style: normal;

The "fieldwork-hum" font-family name is the correct name provided by Adobe Fonts.  We confirmed that both the font family page (https://fonts.adobe.com/fonts/fieldwork#details-section) and the web project editor (https://fonts.adobe.com/my_fonts#web_projects-section) show the same font-family name as the imported CSS file:

If you found the incorrect CSS somewhere else on the Adobe Fonts website, please let us know and we will correct it.

To update your site: replace the "fieldwork-hum-bold" & the other "-weight" font-family names in your CSS file with "fieldwork-hum", and all of the Fieldwork Hum web fonts should work.

Thank you,

-- liz

[darrieno9032092]

This was annoying me for ages and I am so grateful to you for explaining why my font isn't displaying!