Using CSS @font-face properly

Question

Hi I have a quick question on use CSS @font-face to create a font family.

Traditionally, I used to setup my CSS fonts like this:

@font-face {
    font-family: 'My Font Regular';
    src: url('fonts/myfont.ttf');
}
@font-face {
    font-family: 'My Font Bold';
    src: url('fonts/myfont-bold.ttf');
}
p { font-family: "My Font Regular";}
strong {font-family: "My Font Bold";}

However I've recently discovered that you can do it like this:

@font-face {
    font-family: 'My Font';
    src: url('fonts/myfont.ttf');
    font-style:normal;
    font-weight:normal;
}
@font-face {
    font-family: 'My Font';
    src: url('fonts/myfont-bold.ttf');
    font-style:normal;
    font-weight:bold;
}
p { 
font-family: "My Font" ; 
font-style:normal;
font-weight:normal;
}
strong { 
font-family: "My Font" ;
font-style:normal;
font-weight:bold; 
}

My question is, if I use the second technique in bold for example, will the text still render using the custom .eot or will the browser try to emulate it without the using the actual bold font file?

Thanks

See How to define bold, italic using @font-face.As a side note, be aware that the EOT format is not supported by any browser other than IE. — Boaz
– Boaz, Commented Jan 29, 2014 at 14:58

Jeff · Accepted Answer · 2014-01-29 15:41:47Z

1

If your font file is a bolded font, it would be redundant to set font-weight: bold and there's no need to declare font-weight: normal since that is the default value. You should also use more than .eot files so you have a fallback for other browsers like the others suggested.

answered Jan 29, 2014 at 15:41

Jeff

3051 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Avisari · Accepted Answer · 2014-01-29 15:51:11Z

Here is an example of what I use:

        @font-face {
            font-family: 'Franklin Demi';
            src: url('FranklinDemi.eot'),
                 url('FranklinDemi.ttf') format('truetype'),
                 url('FranklinDemi.svg#font') format('svg');
            }
        @font-face {
            font-family: 'Franklin Heavy';
            src: url('FranklinHeavy.eot'),
                 url('FranklinHeavy.ttf') format('truetype'), 
                 url('FranklinHeavy.svg#font') format('svg');
            }
        .sidansTitel{
            font-family: 'Franklin Demi';
            font-size: 22pt;
            color: #8b9ba7;
            text-shadow: 0 1px 0 rgba(0,0,0,0.01);
            }
        .sidansTitel b{
            font-family: 'Franklin Heavy';
            font-weight: normal;
            font-style: normal;
            }

Setting both font-weight: normal; and font-style: normal; makes the font render well in ie/ff/chrome, without it it looked like crap in Chrome. I believe that it looked like crap in Chrome because it tried to render the bold font in bold, which should be fixed by this.

EDIT: spelling

Collectives™ on Stack Overflow

Using CSS @font-face properly

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related