Missing Raleway in IE When Hosting Fonts

[Jennnnn]

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!

[not2easy]

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.

[Jennnnn]

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!

[Jennnnn]

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