Problem with changing font-weight on imported fonts

Question

I got a problem with setting up font-weight. I tried different settings to change FuturaPT: normal, light, bold but it notching changes:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@font-face {
  font-family: "FuturaPT";
  src: url("Fonts/FuturaPTLight.otf");
  src: url("Fonts/FuturaPTMedium.otf");
  src: url("Fonts/FuturaPTDemi.otf");
}

html {
  background-color: #f3f3f3;
}
body {
  font-family: "FuturaPT", "Roboto", sans-serif;
}
.text--main__1 {
  font-size: 1.875rem;
  font-weight: light;
  letter-spacing: 1.5px;
}
.text--main__2 {
  font-size: 16px;
}

try to add font weight 400 font weight light is 300 and your imported font is 400 and 700 — Jaswinder Kaur, Feb 21 '23 at 09:58
Do I have to add a line: font-weight: xxx; underneth corresponding src line? Or I have to create a separate @font face for each font weight? — Piotr Ruszkiewicz, Feb 21 '23 at 10:03
Does this answer your question? [Multiple font-weights, one @font-face query](https://stackoverflow.com/questions/28279989/multiple-font-weights-one-font-face-query) — gianoseduto, Feb 21 '23 at 10:06
if you want to use the uploaded font family then please follow this solution https://stackoverflow.com/questions/43277265/how-to-change-font-face — Jaswinder Kaur, Feb 21 '23 at 10:06
Does this answer your question? [How to change font face](https://stackoverflow.com/questions/43277265/how-to-change-font-face) — Jaswinder Kaur, Feb 21 '23 at 10:09

score 2 · Accepted Answer · answered Feb 21 '23 at 10:12

2

First of all, don't import Roboto if you don't need it, and then change your code in :

@font-face {
  font-family: "FuturaPT";
  src: url("Fonts/FuturaPTMedium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FuturaPT";
  src: url("Fonts/FuturaPTLight.otf") format("opentype");
  font-weight: light;
  font-style: normal;
}

answered Feb 21 '23 at 10:12

gianoseduto

188
1
11

Here you can find more info: https://stackoverflow.com/questions/28279989/multiple-font-weights-one-font-face-query?noredirect=1&lq=1 – gianoseduto Feb 21 '23 at 10:14
1

Thank You. Is there any shorthand for this? – Piotr Ruszkiewicz Feb 21 '23 at 10:19
Nope, because you have to define which url is the correct one for the weight. In this case each font weight is connected to a different font. I know that all these fonts have the same font-family and only different weights but they are all from different resources and to make a right use of @font-face you have to define each one. – gianoseduto Feb 21 '23 at 11:29

score 1 · Answer 2 · answered Feb 21 '23 at 09:58

1

Your CDN link https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap shows that you're only asking for weights 400 and 700 (regular and bold) in the query parameter, so you don't actually import the weights you're trying to use. Just change the link to include other weights that you need, e.g. https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;500;600;700&display=swap

answered Feb 21 '23 at 09:58

Alex

848
6
7

1

Problem is that there is no difference beetwen 400 and 700 (normal and bald) Another problem is that I'm focusing on "Futura PT" and secondary is "Roboto" – Piotr Ruszkiewicz Feb 21 '23 at 10:06

Problem with changing font-weight on imported fonts

2 Answers2