CODEWITHSUNDEEP
cssfontsfont-face
Ilja
Ilja

Reputation: 46527

Define one font face for several font files with different weight

I came across this issue using custom fonts. Many offer several files to support different font weights and italics, so you will define a font face like:

@font-face {
  font-family: 'WebFont Bold';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

Where Bold will be replaced with different font specific words like italic or light. I was wondering is it possible to define one font face that will use specific font, say bold if somewhere in css font-weight: bold; is set?

Upvotes: 2

Views: 1019

Answers (2)

Pik_at
Pik_at

Reputation: 1457

You can set the same name for different font like:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: 'MyFont';
  src: url('myfont-bold.woff') format('woff'),
       url('myfont-bold.ttf') format('truetype');
  font-weight: bold;
}

And using like:

p {
    font-family: 'MyFont';
}
strong {
    font-family: 'MyFont';
    font-weight: bold;
}

Upvotes: 2

dannymo
dannymo

Reputation: 408

The correct way to do it is like this:

@font-face {
  font-family: 'WebFont';
  src: url('myfont_regular.woff')....
}
@font-face {
  font-family: 'WebFont';
  font-weight: bold;
  src: url('myfont_bold.woff')....
}

Upvotes: 2

Related Questions