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>

Stupid question, but does the bold font have the correct boldness properties? I mean, I can't help but notice that you have `font-weight: normal` in the font-face definition. — Mr Lister, Sep 28 '13 at 17:44
Good idea. Just removed it and didn't change anything. `font-weight: bold` will likely just faux bold it. I'll try that too. — jsuissa, Sep 28 '13 at 18:21
Without further information, the problem is probably impossible to analyze. The most probable explanation is that the extra bold font file is somehow broken or not accessible. Check out the console log (when testing the situation in a browser). — Jukka K. Korpela, Sep 28 '13 at 18:59
Everything works well locally. Not even looking to 'fix' issue just wondering if there is maybe a way to convert the fonts as one? Anything to get around the problem. — jsuissa, Sep 28 '13 at 19:20
On what mail client are you getting the error? Because some won't even keep your stylings and queries unless they are inline. That said, font-faces will never be displayed in gmail, as it strips everything from the tag and every style that is not inline. And even then, it will strip link colors that are #000000 and replace those with a generic blue. If you need fancy fonts in a html-email, the only sure way to do so is to use images. — R Lacorne, Sep 30 '13 at 15:05
I updated the question and now it's working in some clients, but not all of the ones that typically support webfonts like AppleMail — jsuissa, Sep 30 '13 at 18:59

score 0 · Accepted Answer · answered Sep 30 '13 at 15:41

0

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.

answered Sep 30 '13 at 15:41

zazzyzeph

1,727
1
12
19

Thanks. I tried this earlier and it's better, but the bold weight is still not working in clients that support webfonts. Wondering if it's my inline code that's causing the problem? – jsuissa Sep 30 '13 at 18:49
1

nope! Default `bold`'s weight is 700, your `@font-face` has 800. Change that and you should be good! I think `bolder` is 900 in case you want that too. – zazzyzeph Oct 30 '13 at 19:24
Thank you -- had it set to that now, but didn't know the reasoning. – jsuissa Nov 01 '13 at 06:41

Embedded two weights of same webfont and only one works

1 Answers1