use different font styles within a loaded font

November 26, 2024

Is there a way to use the different styles from a font that is loaded within a project? For example:

@font-face {
  font-family: WorkSans;
  font-style: normal;
  font-display: fallback;
  src: url(../sass/fonts/WorkSans.ttf) format("truetype");
}

.test{
 font-family: WorkSans;
 font-style: Regular;
}

.test2{
 font-family: WorkSans;
 font-style: Bold;
}

Is there a way I can use regular, bold, extrabold etc., from a font that’s loaded into a project or do I have to load in the exact style for each?

>Solution :

You’ll need to define a @font-face rule for every style. You can define them as below:

/* Regular font */
@font-face {
  font-family: WorkSans;
  font-style: normal;
  font-display: fallback;
  src: url("../sass/fonts/WorkSans.ttf").format("truetype");
}

/* Bold font */
@font-face {
  font-family: WorkSans;
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url("../sass/fonts/WorkSans-Bold.ttf").format("truetype");
}

/* Extra Bold font */
@font-face {
  font-family: WorkSans;
  font-style: normal;
  font-weight: 800;
  font-display: fallback;
  src: url("../sass/fonts/WorkSans-ExtraBold.ttf").format("truetype");
}

.test {
  font-family: "WorkSans";
  font-weight: 400;
}

.test2 {
  font-family: "WorkSans";
  font-weight: 700;
}