font-face 한글/영어, 두께

1. font-face 한글/영어

// font.css
@font-face {
  font-family: "Dongle";
  src: url(../../public/font/Dongle-Light.ttf);
  font-weight: 100;
}
@font-face {
  font-family: "Dongle";
  src: url(../../public/font/Dongle-Regular.ttf);
  font-weight: 400;
}
@font-face {
  font-family: "Dongle";
  src: url(../../public/font/Dongle-Bold.ttf);
  font-weight: 700;
}
@font-face {
  font-family: "Dongle";
  src: url(../../public/font/NanumGothicCoding-Regular.ttf);
  font-weight: 400;
  unicode-range: U+AC00-D7A3;
}
@font-face {
  font-family: "Dongle";
  src: url(../../public/font/NanumGothicCoding-Bold.ttf);
  font-weight: 700;
  unicode-range: U+AC00-D7A3;
}

@font-face {
  font-family: "OpenSans";
  src: url(../../public/font/OpenSans-Regular.ttf);
  font-weight: 400;
}
@font-face {
  font-family: "OpenSans";
  src: url(../../public/font/OpenSans-Medium.ttf);
  font-weight: 500;
}
@font-face {
  font-family: "OpenSans";
  src: url(../../public/font/OpenSans-Bold.ttf);
  font-weight: 700;
}

마찬가지로 예전에 개인 프로젝트 할 때 해뒀었는데 잊을까봐 포스팅합니다..

같은 폰트인데

한글 영어 다르게 폰트 지정하려면

unicode-range: U+AC00-D7A3

 

2. 두께

ValueCommon weight name

100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

@font-face {
    font-family: "Noto Sans KR";
    src: url(/public/font/NotoSansKR-Thin.otf);
    font-weight: 100;
  }
  @font-face {
    font-family: "Noto Sans KR";
    src: url(/public/font/NotoSansKR-Light.otf);
    font-weight: 300;
  }
  @font-face {
    font-family: "Noto Sans KR";
    src: url(/public/font/NotoSansKR-Regular.otf);
    font-weight: 400;
  }
  @font-face {
    font-family: "Noto Sans KR";
    src: url(/public/font/NotoSansKR-Medium.otf);
    font-weight: 500;
  }
  @font-face {
    font-family: "Noto Sans KR";
    src: url(/public/font/NotoSansKR-Bold.otf);
    font-weight: 700;
  }
  @font-face {
    font-family: "Noto Sans KR";
    src: url(/public/font/NotoSansKR-Black.otf);
    font-weight: 900;
  }

 

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight