Why are spec'd Adobe Edge Web Fonts not loading for smartphone?

Report · Apr 08, 2019

My site uses some Adobe Edge Web Fonts and they all seem to display as intended in a variety of browsers and browsers window sizes from my desktop. They also display properly in device preview (including on a smartphone).

After uploading my site to a test area I checked the font display on a smartphone and none of the fonts are displaying properly. Have I missed something?

Report · Apr 08, 2019

Which smartphone and which browser?

Did you clear your smartphone's cache?

Can you post a URL?

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 08, 2019

To answer your questions:

iPhone 8 (iOS 12.2)

Using both Safari and Chrome on the iPhone.

Yes, I cleared the cache.

Here's a page of my site:

https://danbearddesign.com/Ddbd-2019/case1.html

Thanks.

Report · Apr 08, 2019

Try this code in a test page.

<!doctype html>

<head>

<style>

body {font-family: raleway, sans-serif;

font-size: 16px;

line-height:1.5;

text-rendering: optimizeLegibility;

}

h3 {

font-size: 24px; font-weight: 700 }

</style>

</head>

<body>

<h3>Heading 2</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit hic culpa saepe vero eligendi id, asperiores eum accusantium nam distinctio, iure ratione temporibus architecto delectus dolor pariatur, mollitia quas? Sequi.</p>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 08, 2019

That seems to work fine (in both desktop and mobile environments for me).

https://danbearddesign.com/Ddbd-2019/test-1.html

Report · Apr 09, 2019

I'm still unclear on what approach to take with my code. Can you advise? Thx!

Report · Apr 09, 2019

I tried loading my site on a laptop (not my desktop where fonts were loading properly) and the fonts fail there as well. Evidently, the desktop is just loading local versions of the fonts instead of the hosted web versions. I still don't know what in my code is to blame.

Report · Apr 09, 2019

MODERATOR'S UPDATE 2/27/2022:

=============

Effective July 2022, Adobe Edge Fonts will be discontinued.

Please switch over to Adobe Fonts or other suitable font replacement.

=============

Look at my code and compare it to yours. Starting with the Adobe Edge Fonts script.

<script src="//use.edgefonts.net/raleway.js"></script>

Also what's different about my CSS code?

body {font-family: raleway, sans-serif;

font-size: 16px;

line-height:1.5;

text-rendering: optimizeLegibility;

}

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 09, 2019

Thanks! This is all it took:

<script src="http//use.edgefonts.net/raleway.js"></script> (mine)

<script src="//use.edgefonts.net/raleway.js"></script> (yours)

Why are spec'd Adobe Edge Web Fonts not loading for smartphone?

1 Correct answer