font-face weight

Question

I am using a purchase font (Museo Sans) for a custom font in an app I am working on. The files given to me when I purchased it contain web font files for different weights: MuseoSans100Regular, MuseoSans300Regular, etc. Is there a way in @font-face to specify the files to use for the different weights so that I can do this:

font-family: MuseoSans;
font-weight: 300;

Rather than this:

font-family: MuseoSans300;

I don't think so, I think you'll just have to specify the fonts you have by name. — Billy Moat, Sep 17 '12 at 15:26
possible duplicate of [How to define bold, italic using @font-face](http://stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face) — feeela, May 16 '13 at 19:01

score 7 · Accepted Answer · edited Sep 17 '12 at 16:53

7

Yes, you have to specify which file is for which font-weight in two different @font-face definitions:

@font-face {
    font-family: 'MuseoSans';
    src: url('../font/museo_sans_100.woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'MuseoSans';
    src: url('../font/museo_sans_300.woff');
    font-weight: 300;
    font-style: normal;
}

h1, p {
    font-family: MuseoSans;
}

h1 {
    font-weight: 300; /* uses museo_sans_300.woff */
}

p {
    font-weight: 100; /* uses museo_sans_100.woff*/
}

edited Sep 17 '12 at 16:53

Nikola K.

7,093
13
31
39

answered Sep 17 '12 at 15:41

feeela

29,399
7
59
71

I just found out that this question was already answered here on SO: http://stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face – feeela Sep 26 '12 at 09:30

font-face weight

1 Answers1

Linked