[Branched] Adobe Fonts not appearing on website

Report · Mar 17, 2020

Possibly unrelated, possibly related. I have a few fonts included in a Adobe Fonts web project. My subscription is active. The pages seem to contain no errors. The fonts load in FireFox and Chrome, but not in Safari. Safari loads the css file from the snippet and even shows a preview of it, but that does not show the included fonts either. The loaded file size is the same as in FireFox and Chrome. Example page: https://ateliervanbart.nl/

Report · Mar 17, 2020

Replying to myself here: the fonts also don't work in IE Edge.

Report · Mar 17, 2020

@bartmcleod,

I can't tell much from your URL. Sorry.

1. It's a WordPress site with tons of competing scripts.

2. I've no idea which fonts you used and which are not appearing.

3. I don't have Mac Safari.

4. Your home page looks exactly the same to me in Firefox and MS Edge. See screenshots.

5. Try clearing your browser's cache memory and refreshing the page.

MS Edge

Firefox

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 17, 2020

Hi Nancy,

Thanks for your reply. On both your screenshots, the fonts don't work. I will upload a test page that should display the "Industry Black" font.

The test page: https://spaceweb.nl/presentations/test.html

It just has one word that should display in "Industry Black". It does so in Chrome, it does not in Safari. The page has never been loaded before, because it is new, so cache is not at play.

Thank you for looking into it.

Report · Mar 17, 2020

The font name is Industry. Industry Black is a font variant of Industry. Try it with this code.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Industry Font Test</title>
<link rel="stylesheet" href="https://use.typekit.net/qzq1elx.css">
<style>
body { font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; }
/** Industry Black **/
.industry {
font-family: industry, sans-serif;
font-weight: 800;
font-style: normal;
}
em {
font-family: industry, sans-serif;
font-weight: 800;
font-style: italic;
}
</style>
</head>

<body>
<h1>Industry Black Test</h1>
<p> This is a normal font. This is a normal font.  This is a normal font.</p>
<p class="industry">This is Industry.  This is Industry.  This is Industry. </p>
<p>This is a normal font. <em>This is industry italic</em></p>

<p>Tested and works in Firefox, Chrome and MS Edge</p>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Mar 17, 2020

Thanks for finding this Nancy!

I know "Black" is just a variant, but I was unaware that it could not be specified in this way. Especially, because my favourite development browser just parses it (FireFox for Developers). That tricked me into believing I had done it right.

Will try with the suggested changes.

Report · Mar 17, 2020

@Nancy_OShea It works the way you described it. Typical case of RTFM.

Thank you!

Report · Mar 17, 2020

You're welcome. I'm glad to be of help.

I recommend that you get your own Adobe Fonts code to replace the one in my example.

https://fonts.adobe.com/fonts/industry

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

[Branched] Adobe Fonts not appearing on website

1 Correct answer