@font-weight only working bold ---font-weight:600----CodePudding

Font family is running. But font weight doesnt work properly. For example I added font-weight:400 or 100,etc to h3-h4,etc its doesnt work. Only one font weight does work properly and its font-weight:600 I am completely done, I am researching for two days, I'm asking my friends but my problem still here. I think my @font-face's setups are true. Bu I dont know.. Please anyone can help me?

     @font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-thin-webfont.woff2") format("woff2"),
    local("../font/gothamnarrow-thin-webfont.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-light-webfont.woff2") format("woff2"),
    local("../font/gothamnarrow-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-book-webfont.woff2") format("woff2"),
    local("../font/gothamnarrow-book-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-medium-webfont.woff2") format("woff2"),
    local("../font/gothamnarrow-medium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-bold-webfont.woff2") format("woff2"),
    local("../font/gothamnarrow-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-ultra-webfont.woff2") format("woff2"),
    local("../font/gothamnarrow-ultra-webfont.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-black-webfont.woff2") format("woff2"),
    local("../font/gothamnarrow-black-webfont.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

CodePudding user response：

Can you try src: url("...") instead of local: and woff is not really needed, because all browsers supporting woff also support woff2...

@font-face {
  font-family: "Gotham Narrow";
  src: url("../font/gothamnarrow-thin-webfont.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
}

CodePudding user response：

Ok than please try if a google font also not works?

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
  unicode-range: U 0000-00FF, U 0131, U 0152-0153, U 02BB-02BC, U 02C6, U 02DA, U 02DC, U 2000-206F, U 2074, U 20AC, U 2122, U 2191, U 2193, U 2212, U 2215, U FEFF, U FFFD;
}