[CSS] 구글 나눔 명조(Nanum Myeongjo) 웹폰트 사용 방법

구글의 폰트 서비스 Google Fonts

https://fonts.google.com/

 

한글 구글 폰트 Google Fonts (subset=korean)

https://fonts.google.com/?subset=korean

구글 폰트에 있는 한글 폰트들

 

다양한 폰트를 지원합니다. 쉽게 <link>가능하며, 사용도 방법 예제도 너무 잘 나와있습니다.

구글 폰트 서비스

 

 

 

나눔 명조 사용법

구글의 웹폰트 중에 나눔 명조(Nanum Myeongjo)가 있습니다.

미리보기 화면과, 폰트 다운로드와 다양한 정보들이 있습니다.

 

Google Fonts의 나눔 명조

Nanum Myeongjo: https://fonts.google.com/specimen/Nanum+Myeongjo

나눔 명조는 네이버사로 유명한 NHN사의  무료 폰트 입니다.

화면 표시, 인쇄 용으로도 사용이 용의합니다.

구글 나눔 명조 설명

폰트 사용이 정말 편리 해졌습니다.

상단 부분에 (+ SELECT THIS FONT)를 누르면, 처리 방법과 다운로드 버튼이 나타납니다.

사용법, 다운로드 링크까지 나타납니다.

Embed 폰트로 사용하는 방법은 Standard와 @Import방법이 나오네요.

개인적으로 저는 Standard방식을 사용했답니다.

 

(1) Embed 방법

STANDARD

<link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo&display=swap" rel="stylesheet">

@IMPORT

<style>
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo&display=swap');
</style>

 

(2) CSS 적용 방법

스타일 적용방법

font-family: 'Nanum Myeongjo', serif;

 

아주 간단합니다.

바로 적용이 가능합니다.

 

 

 

(추가 설명)

폰트 bold처리나 색상과 같은 스타일 변경은 아래의 방법과 같이 하시면 됩니다.

나눔 명조의 볼드 숫자롤 줄때는 font-weight:700 (Bold700)을 줘야 합니다.

 

폰트 스타일 

font-family: 'Nanum Myeongjo', serif;  [폰트네임 설정]
font-size:15px;                        [폰트사이즈 15px 변경가능]
color: #red ;                          [폰트컬러 변경]

font-weight: normal;                   [폰트두께 변경]
font-weight: lighter;
font-weight: bold;
font-weight: bolder;

font-weight: 100;                      [폰트두께 변경]
font-weight: 400;
font-weight: 700;

line-height:1.3;                       [폰트 줄간격 변경]

 

[참고] 이전 글을 보니, Google Font가 사용이 많이 편리해졌네요. (= 많은 발전이죠!!)

2015/12/09 - [Web/WEB기본] - Google font ( Web font 등)333333