CSS 폰트 관련 정리
폰트를 한글과, 영어 다르게 적용하기
source : wazacs
unicode-range로 지정할 수 있다.
@font-face {
font-family: "NanumSquare";
src: url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");
unicode-range: U+AC00-D7A3;
}
body {
font-family: "NanumSquare";
}
unicode-rage 에 범위를 적용시켜주면 원하는 범위에 따른 폰트가 다르게 적용된다. 다음은 자주 사용하는 유니코드 범위이다.
- 한글 범위: U+AC00-D7A3
- 영어 대문자 범위 : U+0041-005A
- 영어 소문자 범위 : U+0061-007A
- 숫자 범위 : U+0030-0039
- 특수 문자: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E
웹 폰트 적용하는 방법
CDN 사용
@font-face {
font-family: "NanumSquare";
src: url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");
unicode-range: U+AC00-D7A3;
}
body {
font-family: "NanumSquare";
}
ex ) 눈누
웹폰트로 사용으로 되어 있는 곳에서 복사해서 해당 url을 @font-face에 넣는다
ex ) Google 웹 폰트
-
link
<head> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet" /> </head>
font-family: "Noto Sans KR", sans-serif;
-
@import
<style> @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap"); </style>
font-family: "Noto Sans KR", sans-serif;
다운받은 폰트 파일 사용
- 파일을 다운로드 받은 후 원하는 폴더에 넣는다
- url에 해당 폰트 파일의 경로를 기입한다.
<style>
@font-face {
font-family: "hiffy";
src: url("assets/font/hiffy.ttf") format("truetype");
font-weight: 400;
}
body {
font-family: "hiffy";
}
</style>
💙You need to log in to GitHub to write comments.💙