Search code examples
cssfontsfont-facewebfonts

Select font regular or bold in .ttf file with CSS

I have a .ttf file for my website but this file has regular and bold in the same file.

enter image description here

How I can select regular or bold at .ttf file with CSS? Currently I manage the fonts on this way in my CSS file:

@font-face {
  font-family: Bangla MN;
  src: url("../fonts/Bangla MN.ttf");
}

Or is there a way to separate regular and bold from a .ttf file to two files .ttf?

Thanks in advance

Solution

  • It's not a ttc, so it doesn't. But, you probably do have two separate files on disk that declare themselves as being the same font family, and the OS and quite a few desktop applications will happily treat them as one "font" for the purpose of user selection and then swap resources under the hood when you pick normal/italic/bold/etc.

    CSS is nothing like that, it needs you to tell it what to do, and each distinct font needs its own binding:

    @font-face {
  font-family: Bangla;
  src: url("../fonts/Bangla MN.ttf") format("truetype");  
  font-weight: normal;
}

@font-face {
  font-family: Bangla;
  src: url("../fonts/Bangla MN Bold.ttf") format("truetype");  
  font-weight: bold;
}

    And now you have one font-family that will switch file resource depending on whether you're using font-family: Bangla; font-weight:normal in some bit of real site CSS, or font-family: Bangla; font-weight: bold. However, let's not end it there: ttf are universal fonts, and some browsers (notable IE) will be much more anal about loading it due to installation permissions than if you convert it to WOFF and serve that instead. So if you have the rights to use this font, and its license permits WOFF conversion, that's entirely worth doing.