다양한 웹폰트
구글 웹폰트
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
눈누
상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누
상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누
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;}