I am currently engaged in a React project.
origin
The font file resides within the following folder structure.
- src
assets
Fonts
- NotoSansKR-Bold.otf
- NotoSansKR-DemiLight.otf
- NotoSansKR-Medium.otf
- NotoSansKR-Regular.otf
In App.css located at the root, @font-face is configured as shown below.
@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');
}
Within the components situated in src/pages/, the font is utilized through styled-components in the subsequent manner.
const UserName = styled.div`
margin-left: 6px;
font-family: 'Noto Sans KR-Regular';
font-style: normal;
font-size: 14px;
line-height: 20px;
color: #262e33;
`;
Dilemma
The outcome remains consistent regardless of whether Bold, Medium, Regular, or DemiLight is designated. Essentially, it appears that the font style is not being implemented.
Upon investigation, it was uncovered that specifying font-weight as depicted below results in the appropriate font application when the corresponding font-weight and font-family are stipulated.
@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')
}
Query
Yet, from my perspective, Bold, Medium, etc., merely signify variance in weight, and I remain puzzled about why indication of weight is necessitated despite the font thickness already being divided by otf file. Where do you think the error lies within my configurations?