Noto Sans KR(노토산스) 웹폰트 홈페이지 적용하기

Noto Sans KR(노토산스) 웹폰트 홈페이지 적용하기

 

Noto Sans KR 웹폰트를 크롬, IE, 사파리, 파이어폭스에 적용하려면 아래의 코드를 사용하세요.

 

웬만하면 모든 홈페이지에 거의 노토산스를 사용하고 있습니다.

 

왜냐하면 깔끔하고 이쁜 글씨라 정말 잘 사용하고 있습니다.

 

아래의 코드 그대로 사용하시면 노토산스를 크롬, 익스플로러 전부 적용이 가능합니다.^^

@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');}

body, h1, h2, h3, h4, h5, h6, input, textarea, select {
	font-family: 'Noto Sans KR', sans-serif;
}

 

 

만약 위의 방법이 귀찮으신분?은 아래의 코드 그대로 넣으셔도 됩니다.

 

CDN 코드로
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 

font-family: 'Noto Sans KR', sans-serif; 를 Style Sheet에 추가해서

font-family: 'Noto Sans KR', sans-serif; 로 정의해서 사용하면 됩니다.

 

저는 맨처음 알려드린 방법을 추천드립니다.^^

 

 

혹시 내용이 조금이라도 도움이 되었다면 스톤모두 유튜브 구독과 좋아요 부탁드립니다.

 

감사합니다.

 

 

Genspark AI (Genspark Plus 1개월 무료) 링크