CODEWITHSUNDEEP
cssfontsfont-face
angussidney
angussidney

Reputation: 686

How can I combine multiple styles of fonts into one rule?

Using the @font-face rule multiple times, you can specify different font files for different styles of the base font. E.g:

@font-face {
  font-family: myFont;
  src: url(myFont.ttf);
}

@font-face {
  font-family: myFont;
  src: url(myFontBold.ttf);
  font-weight: bold;
}

However, when you make a new rule for each style (bold, italic, bold-italic, etc), a lot of code is repeated:

@font-face {
  font-family: roboto;
  src: url('fonts/roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: roboto;
  src: url('fonts/roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: roboto;
  src: url(fonts/roboto/Roboto-Italic.ttf) format('truetype');
  font-style: italic;
}

@font-face {
  font-family: roboto;
  src: url(fonts/roboto/Roboto-BoldItalic.ttf) format('truetype');
  font-style: italic;
  font-weight: bold;
}

Is there a more efficient way to write this? i.e. can I combine the styles?

Upvotes: 2

Views: 2958

Answers (2)

Vincent1989
Vincent1989

Reputation: 1657

I don't think so, as far as I know, your approach is the best way to specify each style within each font.

After your set up, if you apply font-family:'roboto', with italic and bold, it will automatically fetch the font file from 'Roboto-BoldItalic.ttf' for example.

If you want to have shorter and easier way to write it and not bother about the font presentation so much, I would suggest you just apply 'Roboto-Regular.ttf' the single font file will do. It will still response to the css bold and italic, just that it will not be as accurate as the original font.

Upvotes: 2

Arsen Babajanyan
Arsen Babajanyan

Reputation: 123

replace each font-family: roboto; to type.

@font-face {
    font-family: robotoRegular;
    src: url('fonts/roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: robotoBold;
    src: url('fonts/roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: robotoItalic;
    src: url(fonts/roboto/Roboto-Italic.ttf) format('truetype');
    font-style: italic;
}

@font-face {
    font-family: robotoBoldItalic;
    src: url(fonts/roboto/Roboto-BoldItalic.ttf) format('truetype');
    font-style: italic;
    font-weight: bold;
}

Upvotes: -1

Related Questions