Copy link to clipboard
Copied
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?
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;
}
Copy link to clipboard
Copied
Which smartphone and which browser?
Did you clear your smartphone's cache?
Can you post a URL?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
That seems to work fine (in both desktop and mobile environments for me).
Copy link to clipboard
Copied
I'm still unclear on what approach to take with my code. Can you advise? Thx!
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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;
}
Copy link to clipboard
Copied
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)