Highlighted

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

New Here ,
Apr 08, 2019

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?

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

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; 

Views

366

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

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

New Here ,
Apr 08, 2019

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?

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

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; 

Views

367

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
Apr 08, 2019 0
Adobe Community Professional ,
Apr 08, 2019

Copy link to clipboard

Copied

Which smartphone and which browser?

Did you clear your smartphone's cache?

Can you post a URL?

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...
Apr 08, 2019 0
New Here ,
Apr 08, 2019

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.

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...
Apr 08, 2019 0
Adobe Community Professional ,
Apr 08, 2019

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>






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...
Apr 08, 2019 1
New Here ,
Apr 08, 2019

Copy link to clipboard

Copied

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

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

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...
Apr 08, 2019 0
New Here ,
Apr 09, 2019

Copy link to clipboard

Copied

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

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...
Apr 09, 2019 0
New Here ,
Apr 09, 2019

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.

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...
Apr 09, 2019 0
Adobe Community Professional ,
Apr 09, 2019

Copy link to clipboard

Copied

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, 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...
Apr 09, 2019 1
dbd-ma LATEST
New Here ,
Apr 09, 2019

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)

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...
Apr 09, 2019 0