다양한 웹폰트

구글 웹폰트

fonts.google.com/

Google Fonts

 

 

눈누

noonnu.cc/

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

 

 

 

 

 

많이 쓰는 웹폰트

: import 와 link 중 하나만 사용하면 된다. import는 css 부분에 link는 html header 에 

 

 

나눔고딕

@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); .nanumgothic * { font-family: 'Nanum Gothic', sans-serif; }

<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">

 

body { font-family: 'Nanum Gothic', sans-serif; }

 

 

 

나눔바른고딕

@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css");

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css">

 

body { font-family: 'NanumBarunGothic', sans-serif; }

 

 

 

나눔스퀘어

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css">

 

body  { font-family: 'NanumSquare', sans-serif !important; }

 

 

 

Noto Sans KR

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap" rel="stylesheet">

 

body {font-family: 'Noto Sans KR', sans-serif;}

 

 

 

Roboto

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap');

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap" rel="stylesheet">

 

body {font-family: 'Roboto', sans-serif;}