NOTO SANS 노토산스 폰트를 다운받아서 사용하는 방법은 지난번에 포스팅했었는데요
https://moo-you.tistory.com/151
Noto Fonts :: 노토산스 한글 폰트 다운받고 설치하기
Noto Fonts 한글 다운받고 설치하기 1. 구글에서 google noto sans 검색해서 다음 사이트에 접속합니다. www.google.com/get/noto/ Google Noto Fonts When text is rendered by a computer, sometimes character..
moo-you.tistory.com
이번에는 CDN을 이용해서 하는 방법입니다.
CDN으로 폰트를 변경하면 속도 문제가 있을수있고 인터넷 연결이 되야 하기 때문에 개인적으로 잘 사용은 안하지만
간편하게 적용할 수가 있어서 편리합니다.
css에 아래와 같이 넣어주면 됩니다.
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
body, talbe, th, td, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, textarea, blockquote, span, * {
font-family: 'Noto Sans KR', sans-serif;
}
혹시 일본어나 중국오 노토산스가 필요하다면 아래와 같이 간단하게 적용할 수 있습니다.
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);
/* 일본어 */
:lang(ja) {
font-family: 'Noto Sans JP', sans-serif;
}
/* 중국어 (간체) */
:lang(zh-Hans) {
font-family: 'Noto Sans SC', sans-serif;
}
<body>
<div lang="ja"> ... 일본어 콘텐츠</div>
<div lang="zh-Hans"> ... 중국어 간체 콘텐츠</div>
위와 같이 설정하면 구글에서는 변경된 폰트를 간편하게 확인 가능합니다.
하지만 모든 브라우저에서 동작하는게 아니기 때문에 웹표준을 고려한다면 아래 코드를 css에 입력해 주세요
@font-face {font-family: 'Noto Sans KR';font-style: normal;
font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2)
format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff)
format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2)
format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff)
format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2)
format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff)
format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2)
format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff)
format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2)
format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff)
format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}
직접 폰트 확장자를 변경해서 사용 할 수도 있습니다.
https://moo-you.tistory.com/55
ttf폰트 직접 웹폰트 업로드해 사용하기
▶ 웹에서 사용할수 있는 폰트 TrueTypeFont(*.ttf) : 트루타입은 애플과 마이크로소프트에 의해 1980년대 후반에 개발된 글꼴 표준 OpenTypeFonts(*.otf) : 오픈타입은 확장가능한 마이크로소프트 컴퓨터 글
moo-you.tistory.com
'Front-end > 화면구현' 카테고리의 다른 글
| 아이콘 다운로드 사이트 (0) | 2021.07.16 |
|---|---|
| font css 폰트 적용하기 (0) | 2021.07.05 |
| giphy 움짤 직이는 이미지 모음 어플 사이트 (0) | 2021.06.15 |
| 구글 웹폰트 사용 방법 (0) | 2021.06.14 |
| html 제목태그의 필요성 (0) | 2021.06.12 |
댓글