[Branched] Adobe Fonts not appearing on website

Community Beginner ,
Mar 17, 2020

Copy link to clipboard

Copied

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/

 

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

 

 

TOPICS
Font rendering

Views

500

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

[Branched] Adobe Fonts not appearing on website

Community Beginner ,
Mar 17, 2020

Copy link to clipboard

Copied

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/

 

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

 

 

TOPICS
Font rendering

Views

501

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
Mar 17, 2020 0
Community Beginner ,
Mar 17, 2020

Copy link to clipboard

Copied

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

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...
Mar 17, 2020 0
Adobe Community Professional ,
Mar 17, 2020

Copy link to clipboard

Copied

@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

image.png

Firefox

image.png

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Mar 17, 2020 0
Community Beginner ,
Mar 17, 2020

Copy link to clipboard

Copied

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.

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...
Mar 17, 2020 0
Adobe Community Professional ,
Mar 17, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

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...
Mar 17, 2020 1
Community Beginner ,
Mar 17, 2020

Copy link to clipboard

Copied

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.

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...
Mar 17, 2020 0
Community Beginner ,
Mar 17, 2020

Copy link to clipboard

Copied

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

 

Thank you!

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...
Mar 17, 2020 0
Adobe Community Professional ,
Mar 17, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

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...
Mar 17, 2020 0