noto sans 웹폰트 다운로드 사용 방법
cdn을 걷어내기 위해 웹폰트를 다운로드하여 사용하게 되었다.
아래 글은 그 여정을 돌아보며 특별히 noto sans kr 웹폰트 사용 방법을 정리한 내용이다.
- noto sans 웹폰트를 어디서 다운로드 받아야 하는지,
- 어떤 파일타입을 받아야 하는지,
- css에 폰트 설정을 어떻게 해야 하는지
위 세 가지를 중점으로 살펴 본다.
먼저 웹에서 사용하는 폰트는
압축률이 좋은 woff2
혹은 모든 브라우저에서 지원하고 w3에서 추천하는 woff 타입을 사용해야 한다.
뒤에서 다시 살펴 보겠지만,
@font-face src 속성에 적을 때도 woff2 url를 먼저 적고 그 다음 woff url을 적는다.
woff2, woff 타입으로 noto sans kr 다운로드
1차시도
구글 폰트 공식 사이트에 noto sans kr를 검색하여 해당 폰트를 다운로드 하면 tff 타입만 있다.
2차 시도
다른 방법으로, 구글 폰트 공식 사이트 우측 사이드에서 import url를 통해 css 파일을 추적해 보면 woff2 타입만 있다.
3차 시도
또다른 방법으로, 눈누 사이트에서 noto sans를 검색하여 import url을 통해 css을 열어보니 여기도 woff2 타입만 있다.
다운로드 방법1
google webfonts helper 사이트에서 'noto sans kr' 를 검색하면 font-face도 생성해주고 폰트의 모든 타입을 다운로드 할 수 있다.
다운로드 방법2
검색창에 'font face generator' 또는 'online font converter' 라고 검색하여 관련된 사이트로 가서 ttf 파일을 올리면 font-face도 생성해주고 woff2, woff 도 만들어 준다. (ttf에서 woff2 나 woff로 변환된 파일의 용량이 제법 큰 단점이 있다.)
다운로드 방법3
https://github.com/bswsw/noto-sans-korean-webfont 어느 맘씨 좋은 개발자님이 친히 만들어두셨다.
사용방법
위에서 woff2, woff 파일을 다운로드 받아 css/fonts/ 폴더에 담고
아래와 같이 css, html 작성하여 테스트 한다.
/* noto-sans-kr-300 - korean */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 300;
src: url('../fonts/noto-sans-kr-v36-korean-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/noto-sans-kr-v36-korean-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
}
/* noto-sans-kr-regular - korean */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 400;
src: url('../fonts/noto-sans-kr-v36-korean-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/noto-sans-kr-v36-korean-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
}
/* noto-sans-kr-500 - korean */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 500;
src: url('../fonts/noto-sans-kr-v36-korean-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/noto-sans-kr-v36-korean-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
}
/* noto-sans-kr-700 - korean */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 700;
src: url('../fonts/noto-sans-kr-v36-korean-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/noto-sans-kr-v36-korean-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
<style>
*{font-family: 'Noto Sans KR','Apple SD Gothic Neo','Malgun gothic','Helvetica','Dotum',sans-serif;}
</style>
</head>
<body>
<h1 style="font-weight:700;"> noto sans kr 테스트 ☆</h1>
<h2 style="font-weight:500;"> noto sans kr 테스트 ☆</h2>
<h3 style="font-weight:400;"> noto sans kr 테스트 ☆</h3>
<h4 style="font-weight:300;"> noto sans kr 테스트 ☆</h4>
<h5 style="font-weight:300;"> noto sans kr 테스트 ☆</h3>
<h6 style="font-weight:300;"> noto sans kr 테스트 ☆</h4>
</body>
</html>
참고
https://fonts.google.com/noto/specimen/Noto+Sans+KR?query=noto+sans
Noto Sans Korean - Google Fonts
Noto is a global font collection for writing in all modern and ancient languages. Noto Sans KR is an unmodulated (“sans serif”) design for the Korean language u
fonts.google.com
https://gwfh.mranftl.com/fonts/noto-sans-kr?subsets=korean
google webfonts helper
gwfh.mranftl.com
https://www.w3schools.com/Css/css3_fonts.asp
CSS Web Fonts
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://noonnu.cc/font_page/34
눈누
본고딕 (Noto Sans) - GoogleXAdobe
noonnu.cc
https://github.com/bswsw/noto-sans-korean-webfont
GitHub - bswsw/noto-sans-korean-webfont: Noto Sans Korean Webfont for Web Developer
Noto Sans Korean Webfont for Web Developer. Contribute to bswsw/noto-sans-korean-webfont development by creating an account on GitHub.
github.com
https://dimorin.github.io/notosanskr/index2.html
Document
dimorin.github.io
'프론트엔드 > css' 카테고리의 다른 글
| canvas size 이해 (0) | 2024.09.15 |
|---|---|
| Material Symbols, Material Icons 사용 방법 (0) | 2023.12.28 |
| 3D 속성 (0) | 2022.08.18 |
| flex-basis (0) | 2022.02.07 |
| 테이블 헤더 고정 sticky (0) | 2022.01.21 |