Skip to main content
D
dbd-ma
Participating Frequently
April 8, 2019
Answered

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

  • April 8, 2019
  • 1 reply
  • 1562 views

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?

This topic has been closed for replies.
Correct answer Nancy OShea

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.


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; 

} 

 

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 8, 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
D
dbd-maAuthor
Participating Frequently
April 8, 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.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 8, 2019

Try this code in a test page.

 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Edge Font Test</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

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

 

<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
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices