CODEWITHSUNDEEP
htmlcssreactjsfonts
yjlee
yjlee

Reputation: 553

Why do I need to set font-weight when setting @font-face?

I am working on a React project.

source

The folder structure where the font file is located is as follows.

- src
    assets
       Fonts
           - NotoSansKR-Bold.otf
           - NotoSansKR-DemiLight.otf
           - NotoSansKR-Medium.otf
           - NotoSansKR-Regular.otf

@font-face is set as follows in App.css in root.

@font-face {
  font-family: 'Noto Sans KR-Bold';
  src: url('./assets/Fonts/NotoSansKR-Bold.otf');
}

@font-face {
  font-family: 'Noto Sans KR-Medium';
  src: url('./assets/Fonts/NotoSansKR-Medium.otf');
}

@font-face {
  font-family: 'Noto Sans KR-Regular';
  src: url('./assets/Fonts/NotoSansKR-Regular.otf');
}

@font-face {
  font-family: 'Noto Sans KR-DemiLight';
  src: url('./assets/Fonts/NotoSansKR-DemiLight.otf');
}

And in the components in src/pages/, font is used as follows(using styled-components).

const UserName = styled.div`
  margin-left: 6px;
  font-family: 'Noto Sans KR-Regular';
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  color: #262e33;
`;

Problem

The result is the same no matter which one of Bold, Medium, Regular, and DemiLight is set. In other words, it seems that the font style is not applied.

As a result of the search, it was found that if the font-weight is specified as follows, the matching font is applied when the corresponding font-weight and font-family are specified.

@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: 100;
  src: url("styles/fonts/NotoSansKR-Light.woff2") format('woff2'),
  url("styles/fonts/NotoSansKR-Light.woff") format('woff'),
  url("styles/fonts/NotoSansKR-Light.otf") format('truetype')
}

@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: normal;
  src: url("styles/fonts/NotoSansKR-Regular.woff2") format('woff2'),
  url("styles/fonts/NotoSansKR-Regular.woff") format('woff'),
  url("styles/fonts/NotoSansKR-Regular.otf") format('truetype')
}


@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: 500;
  src: url("styles/fonts/NotoSansKR-Medium.woff2") format('woff2'),
  url("styles/fonts/NotoSansKR-Medium.woff") format('woff'),
  url("styles/fonts/NotoSansKR-Medium.otf") format('truetype')
}

@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: bold;
  src: url("styles/fonts/NotoSansKR-Bold.woff2") format('woff2'),
  url("styles/fonts/NotoSansKR-Bold.woff") format('woff'),
  url("styles/fonts/NotoSansKR-Bold.otf") format('truetype')
}

Question

However, in my opinion, Bold, Medium, etc. are the difference in weight after all, and I do not know why the weight should be specified even though the otf file is divided by font thickness. Why are my settings wrong?

Upvotes: 1

Views: 300

Answers (1)

Huy Pham
Huy Pham

Reputation: 449

Your settings are not wrong. It's about @font-face rule

A given set of @font-face rules define a set of fonts available for use within the documents that contain these rules. When font matching is done, fonts defined using these rules are considered before other available fonts on a system.

Docs source

Easier to understand @font-face blog

Upvotes: 0

Related Questions