웹디자인 (HTML,JS)

구글 무료 한글폰트 간단 사용방법

날으는물고기 2021. 1. 13. 23:52

홈페이지나 블로그를 만들 때 한글 폰트를 무료로 아주 간단하게 적용할 수 있다.

상업적인 사이트에서도 폰트를 무료로 이용이 가능하다.

 

1. Browse Fonts - Google Fonts

홈페이지 접속 https://fonts.google.com/

 

2. Korean(한글) 선택

 

3. 한글폰트 26개 중 원하는 폰트 선택

 

4. 원하는 사이즈 (보통 400) 우측 "+ Select this style" 클릭

 

5. 우측 "Selected family" Review 박스 하단 <link> 태그를 복사해서 홈페이지 <head> 태그 안에 붙여넣기

 

6. 폰트를 적용하고자 하는 CSS에 위 font-family 복사해서 붙여넣기

 

7. 텍스트를 작성할 때 직접 HTML 태그 style로 적용해도 가능함

<p style="font-family: 'Noto Sans KR', sans-serif;">구글 노토산스 한글폰트</p>

 

폰트를 하나씩 추가할 필요는 없고 여러개를 선택하면 한번에 추가할 수 있다.

참고로 한글폰트 26개 전체를 사용하려면 아래 코드를 삽입하면 된다.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Black+And+White+Picture&family=Black+Han+Sans&family=Cute+Font&family=Do+Hyeon&family=Dokdo&family=East+Sea+Dokdo&family=Gaegu&family=Gamja+Flower&family=Gothic+A1&family=Gugi&family=Hi+Melody&family=Jua&family=Kirang+Haerang&family=Nanum+Brush+Script&family=Nanum+Gothic&family=Nanum+Gothic+Coding&family=Nanum+Myeongjo&family=Nanum+Pen+Script&family=Noto+Sans+KR&family=Noto+Serif+KR&family=Poor+Story&family=Single+Day&family=Song+Myung&family=Stylish&family=Sunflower:wght@300&family=Yeon+Sung&display=swap" rel="stylesheet">

그리고 해당 폰트를 적용하려면 아래 CSS를 사용하면 된다.

font-family: 'Black And White Picture', sans-serif;
font-family: 'Black Han Sans', sans-serif;
font-family: 'Cute Font', cursive;
font-family: 'Do Hyeon', sans-serif;
font-family: 'Dokdo', cursive;
font-family: 'East Sea Dokdo', cursive;
font-family: 'Gaegu', cursive;
font-family: 'Gamja Flower', cursive;
font-family: 'Gothic A1', sans-serif;
font-family: 'Gugi', cursive;
font-family: 'Hi Melody', cursive;
font-family: 'Jua', sans-serif;
font-family: 'Kirang Haerang', cursive;
font-family: 'Nanum Brush Script', cursive;
font-family: 'Nanum Gothic', sans-serif;
font-family: 'Nanum Gothic Coding', monospace;
font-family: 'Nanum Myeongjo', serif;
font-family: 'Nanum Pen Script', cursive;
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Noto Serif KR', serif;
font-family: 'Poor Story', cursive;
font-family: 'Single Day', cursive;
font-family: 'Song Myung', serif;
font-family: 'Stylish', sans-serif;
font-family: 'Sunflower', sans-serif;
font-family: 'Yeon Sung', cursive;
728x90