728x90
300x250
웹작업에 정말 많이 사용되는 'Noto Sans 폰트 적용하는 방법 알아보겠습니다.
위에 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
반응형
'Front-end > FONT' 카테고리의 다른 글
노토산스 kr (Noto Sans Korean) 다운로드 (0) | 2023.02.23 |
---|---|
noto sans cjk kr / noto sans kr 차이 (0) | 2023.01.07 |
NotoSans kr 웹폰트 다운로드 ( eot, otf, woff, woff2 ) (0) | 2023.01.06 |
폰트 사이즈 em, rem 구하는 방법 (0) | 2021.06.13 |
댓글