Embedded two weights of same webfont and only one works

Question

I'm embedding two weights of Raleway in an HTML email and want to self host.

I converted the Regular and Extra Bold weights using Font Squirrel, but only the regular weight is working. Not sure if there could be some sort of conflict because it's really one font being embedded as two separate ones?

The font files themselves look correct on the desktop. In the browser locally both fonts work.

Wondering if there is an alternative approach to converting the fonts that would sidestep the issue?

Embed code:

@font-face {
    font-family: 'ralewayregular';
    src: url('raleway-regular-webfont.eot');
    src: url('raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('raleway-regular-webfont.woff') format('woff'),
         url('raleway-regular-webfont.ttf') format('truetype'),
         url('raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'ralewayextrabold';
    src: url('raleway-extrabold-webfont.eot');
    src: url('raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('raleway-extrabold-webfont.woff') format('woff'),
         url('raleway-extrabold-webfont.ttf') format('truetype'),
         url('raleway-extrabold-webfont.svg#ralewayextrabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Font Stack Samples:

font-family: 'ralewayregular',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;

font-family: 'ralewayextrabold',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;

EDIT:

I tried a revised font stack earlier treating Raleway as one font with two weights. It looks like the extra bold weight now is working in some clients, but not on email clients that usually have no trouble displaying webfonts such as Apple Mail on the iPad.

@font-face {
    font-family: 'raleway';
    src: url('raleway-regular-webfont.eot');
    src: url('raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('raleway-regular-webfont.woff') format('woff'),
         url('raleway-regular-webfont.ttf') format('truetype'),
         url('raleway-regular-webfont.svg#ralewayregular') format('svg');
      font-weight: 400;
    font-style: normal;

}




@font-face {
    font-family: 'raleway';
    src: url('raleway-extrabold-webfont.eot');
    src: url('raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('raleway-extrabold-webfont.woff') format('woff'),
         url('raleway-extrabold-webfont.ttf') format('truetype'),
         url('raleway-extrabold-webfont.svg#ralewayextrabold') format('svg');
      font-weight: 800;
    font-style: normal;


}

Revised Font Stack:

<h1 style="font-size : 16px; line-height : 24px; letter-spacing : 2.72px; color: #ffffff; font-family: 'Raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;  font-weight: 800;">TEXT</h1>

Answer 1

Firstly, you don't need those quotes being you're making the font-family one word. Secondly, you really don't need to have two different font names, you can keep the same font name by keeping the same font-family name but making your font-weight:bold in the bold section of your @font-face. specify font-weight either in your inline css or by <b> or <strong> tags and it should work fine. Faux bolding isn't an issue unless your @font-face isn't loaded at all and you have the font in your OS's stack.

You should also try disabling raleway from your computer's font stack before testing. I also have my font files' url on an absolute path.

Hope one of those helps.