본문 바로가기
Front-end/FONT

NotoSans 웹폰트 간단하게 적용하기

by mooyou 2018. 11. 25.
728x90
300x250

웹작업에 정말 많이 사용되는 'Noto Sans 폰트 적용하는 방법 알아보겠습니다.


NotoSansKr (3).zip

NotoSansKr.zip

NotoSansKr (2).zip



위에 NotoSans 파일을 다운받습니다. 한개의 알집으로 간단하게 올리고 싶었는데 10m가 넘으니까 용량초과 나오네요

부득이하게 3개 파일로 나눴습니다.







다운 받은 파일의 압축파일을 풀면

다양한 사이즈와 확장자의 notosanskr 폰트들이 나옵니다.










이 폰트들을 로컬 fonts 폴더에 넣어주고 서버에 업로드 시켜줍니다.





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess */
 
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(/fonts/NotoSansKr/NotoSansKR-Thin.woff2) format('woff2'),
       url(/fonts/NotoSansKr/NotoSansKR-Thin.woff) format('woff'),
       url(/fonts/NotoSansKr/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/NotoSansKr/NotoSansKR-Light.woff2) format('woff2'),
       url(/fonts/NotoSansKr/NotoSansKR-Light.woff) format('woff'),
       url(/fonts/NotoSansKr/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(/fonts/NotoSansKr/NotoSansKR-Regular.woff2) format('woff2'),
        url(/fonts/NotoSansKr/NotoSansKR-Regular.woff) format('woff'),
        url(/fonts/NotoSansKr/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url(/fonts/NotoSansKr/NotoSansKR-Medium.woff2) format('woff2'),
        url(/fonts/NotoSansKr/NotoSansKR-Medium.woff) format('woff'),
        url(/fonts/NotoSansKr/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(/fonts/NotoSansKr/NotoSansKR-Bold.woff2) format('woff2'),
        url(/fonts/NotoSansKr/NotoSansKR-Bold.woff) format('woff'),
        url(/fonts/NotoSansKr/NotoSansKR-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 900;
   src: url(/fonts/NotoSansKr/NotoSansKR-Black.woff2) format('woff2'),
        url(/fonts/NotoSansKr/NotoSansKR-Black.woff) format('woff'),
        url(/fonts/NotoSansKr/NotoSansKR-Black.otf) format('opentype');
 
cs




위에 css 코드를 css파일에 넣어주세요



1
2
body { font-family:'Noto Sans KR'}
cs


tkdydgkfEosms

사용할때는 font-family: 'Noto Sans KR'; 이런식으로 쓰면됩니다.

728x90
반응형

댓글