Welcome to WebmasterWorld Guest from 34.228.115.216

Forum Moderators: phranque

Missing Raleway in IE When Hosting Fonts

     
11:49 pm on Oct 12, 2018 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 49
votes: 1


I'm trying to host 2 Google fonts on my site. Everything looks correct when I view my site in FF and Chrome (using a local host) but one of the fonts, Raleway, doesn't work in IE 11.

I used Font Squirrel's generator to create an .eot compressed version) format for IE. The Raleway demo file I downloaded from Font Squirrel looks correct. The path for my fonts folder is correct. I don’t have an eot file for Bowlby One but that seems to be working for some reason.

I was given one eot file to download but there are two eot files in the style sheet code I downloaded. I don't know why that is.

I changed the font-display rule for Raleway to “swap" but that didn’t help.

CSS - @font-face rules (located at top of css file):

@font-face {
font-family: 'Bowlby One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Bowlby One Regular'), local('BowlbyOne-Regular');
url('../fonts/bowlby-regular-webfont.woff2') format('woff2'),
url('../fonts/bowlby-regular-webfont.woff') format('woff'),
url('../fonts/bowlby-regular-webfont.ttf') format('truetype');
}

@font-face {
font-family: 'ralewaylight';
font-weight: normal;
font-style: normal;
font-display: fallback;
src: local('Raleway Light'), local('Raleway-Light');
src: url('../fonts/raleway-light-webfont.eot'),
src: url('../fonts/raleway-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/raleway-light-webfont.woff2') format('woff2'),
url('../fonts/raleway-light-webfont.woff') format('woff'),
url('../fonts/raleway-light-webfont.ttf') format('truetype');
}

CSS - body rule for Raleway:

h1{font:46px'Raleway',Arial, Helvetica, sans-serif;font-weight:300;color:#11688f;margin:0.4em 0;text-align:center;letter-spacing:-2px;}

What am I doing wrong? Thanks for your help!
3:12 am on Oct 13, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4155
votes: 262


I can't help but notice a difference between the two @font-face rules as shown here. Mind you, I don't use either font so I wouldn't know whether they're case sensitive.

The first rule set has: font-family: 'Bowlby One';
The second rule set has: font-family: 'ralewaylight';

Further down in the rules, that 'ralewaylight'; is called 'Raleway Light' so if the rule set for the 'Bowlby One' is working as expected and the 'Raleway Light' rules are not working as expected, the first thing I would do is to use the formats from the set that is working in the set that is not working.

5:19 pm on Oct 14, 2018 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 49
votes: 1


I got Raleway to work in IE (viewed in a local host) by using a non-minified version of my font rules.

When I use the minified version (see below) Raleway doesn't display:

h1{font:46px'Raleway', Arial, Helvetica, sans-serif;font-weight:300;color:#11688f;margin:0.4em 0;text-align:center;letter-spacing:-2px;}


When I use the unminified version (see below) Raleway displays:

h1 {
font: 46px 'Raleway', Verdana, Helvetica, sans-serif;
font-weight: 300;
color: #11688f;
margin: 0.4em 0;
text-align: center;
letter-spacing: -2px;
}


I've read that IE can react this way when a semi-colon or end bracket is missing. I've checked the minified version and it looks okay.

I replaced Raleway with Bowlby One in the minified css and that works so it seems that IE is having trouble interpreting Raleway. I added the eot?iefix font file to my fonts folder and rules. I substituted Raleway's 300 weight version with the 400 weight version (with corresponding rules) to see if the regular weight of Raleway might be easier for IE to understand but that didn't work.

I guess I could use unminified css for Raleway font rules but then will Google say that my css isn't minified?

Are there any fixes for this type of IE issue?

Thanks!
9:47 pm on Oct 14, 2018 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 49
votes: 1


I think I fixed everything. IE didn’t like the missing space between 46px and ‘Raleway’. Thanks again for your help.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members