無제
모던 웹 폰트 베스트 10 레퍼런스 본문
[한글 폰트]
Noto Sans KR
Pretendard
Spoqa Han Sans Neo
Nanum Gothic
SUIT
[영문 폰트]
Inter
Poppins
Montserrat
DM Sans
Playfair Display
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
<title>font</title>
<style type="text/css">
</style>
<link rel="stylesheet" href="font.css">
</head>
<body>
<article>
<section class="noto-sans-kr">
<h1>노토 산스 케이알</h1>
<h2>가장 많이 쓰는 기본 한글 웹폰트</h2>
<p>
품고 돋고, 미인을 하여도 칼이다. 군영과 것은 이상 내는 미묘한 이것이다. 인간이 봄바람을 물방아 얼음에 못할 대한 꽃 위하여서. 같이 창공에 착목한는 싶이 노래하며 뿐이다. 생명을
얼음에 능히
그들의 낙원을 원대하고, 거선의 보는 피다. 피어나는 가치를 인간이 밝은 인도하겠다는 있는 피다. 끝까지 모래뿐일 우리는 사라지지 우리 같이, 피어나기 뭇 그리하였는가? 반짝이는 그들에게
있으며,
튼튼하며, 것은 예수는 목숨이 것이다.
것은 사람은 가는 현저하게 그들에게 힘차게 과실이 것이다. 꽃이 뭇 무엇을 동산에는 이 청춘의 그들은 이상은 것이다. 풀밭에 찾아 내는 피고, 실로 쓸쓸하랴?
</p>
</section>
<section class="pretendard">
<h1>프리텐다드</h1>
<h2>최근 개발자 + 디자이너 사이에서 가장 인기</h2>
<p>
품고 돋고, 미인을 하여도 칼이다. 군영과 것은 이상 내는 미묘한 이것이다. 인간이 봄바람을 물방아 얼음에 못할 대한 꽃 위하여서. 같이 창공에 착목한는 싶이 노래하며 뿐이다. 생명을
얼음에 능히
그들의 낙원을 원대하고, 거선의 보는 피다. 피어나는 가치를 인간이 밝은 인도하겠다는 있는 피다. 끝까지 모래뿐일 우리는 사라지지 우리 같이, 피어나기 뭇 그리하였는가? 반짝이는 그들에게
있으며,
튼튼하며, 것은 예수는 목숨이 것이다.
것은 사람은 가는 현저하게 그들에게 힘차게 과실이 것이다. 꽃이 뭇 무엇을 동산에는 이 청춘의 그들은 이상은 것이다. 풀밭에 찾아 내는 피고, 실로 쓸쓸하랴?
</p>
</section>
<section class="spoqa-han-sans-neo">
<h1>스포카 한 산스 네오</h1>
<h2>기업 사이트에서 많이 사용</h2>
<p>
품고 돋고, 미인을 하여도 칼이다. 군영과 것은 이상 내는 미묘한 이것이다. 인간이 봄바람을 물방아 얼음에 못할 대한 꽃 위하여서. 같이 창공에 착목한는 싶이 노래하며 뿐이다. 생명을
얼음에 능히
그들의 낙원을 원대하고, 거선의 보는 피다. 피어나는 가치를 인간이 밝은 인도하겠다는 있는 피다. 끝까지 모래뿐일 우리는 사라지지 우리 같이, 피어나기 뭇 그리하였는가? 반짝이는 그들에게
있으며,
튼튼하며, 것은 예수는 목숨이 것이다.
것은 사람은 가는 현저하게 그들에게 힘차게 과실이 것이다. 꽃이 뭇 무엇을 동산에는 이 청춘의 그들은 이상은 것이다. 풀밭에 찾아 내는 피고, 실로 쓸쓸하랴?
</p>
</section>
<section class="nanum-gothic">
<h1>나눔 고딕</h1>
<h2>오랫동안 사용된 무료 한글 폰트</h2>
<p>
품고 돋고, 미인을 하여도 칼이다. 군영과 것은 이상 내는 미묘한 이것이다. 인간이 봄바람을 물방아 얼음에 못할 대한 꽃 위하여서. 같이 창공에 착목한는 싶이 노래하며 뿐이다. 생명을
얼음에 능히
그들의 낙원을 원대하고, 거선의 보는 피다. 피어나는 가치를 인간이 밝은 인도하겠다는 있는 피다. 끝까지 모래뿐일 우리는 사라지지 우리 같이, 피어나기 뭇 그리하였는가? 반짝이는 그들에게
있으며,
튼튼하며, 것은 예수는 목숨이 것이다.
것은 사람은 가는 현저하게 그들에게 힘차게 과실이 것이다. 꽃이 뭇 무엇을 동산에는 이 청춘의 그들은 이상은 것이다. 풀밭에 찾아 내는 피고, 실로 쓸쓸하랴?
</p>
</section>
<section class="suit">
<h1>수트</h1>
<h2>최근 UI 디자인에서 인기</h2>
<p>
품고 돋고, 미인을 하여도 칼이다. 군영과 것은 이상 내는 미묘한 이것이다. 인간이 봄바람을 물방아 얼음에 못할 대한 꽃 위하여서. 같이 창공에 착목한는 싶이 노래하며 뿐이다. 생명을
얼음에 능히
그들의 낙원을 원대하고, 거선의 보는 피다. 피어나는 가치를 인간이 밝은 인도하겠다는 있는 피다. 끝까지 모래뿐일 우리는 사라지지 우리 같이, 피어나기 뭇 그리하였는가? 반짝이는 그들에게
있으며,
튼튼하며, 것은 예수는 목숨이 것이다.
것은 사람은 가는 현저하게 그들에게 힘차게 과실이 것이다. 꽃이 뭇 무엇을 동산에는 이 청춘의 그들은 이상은 것이다. 풀밭에 찾아 내는 피고, 실로 쓸쓸하랴?
</p>
</section>
<section class="inter">
<h1>Inter</h1>
<h2>Current UI Design Standard Font</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a
galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially
unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</section>
<section class="poppins">
<h1>Poppins</h1>
<h2>Popular in Startup Design</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a
galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially
unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</section>
<section class="montserrat">
<h1>Montserrat</h1>
<h2>Used a lot for headlines</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a
galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially
unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</section>
<section class="dm-sans">
<h1>DM Sans</h1>
<h2>simple UI font</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a
galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially
unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</section>
<section class="playfair-display">
<h1>Playfair Display</h1>
<h2>Serif style</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a
galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially
unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</section>
</article>
</body>
</html>
/* 한글 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/static/woff2/SUIT.css');
/* 영문 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
/* 기본 세팅 */
* {
margin: 0px;
padding: 10px;
border: 0px solid gray;
}
body {
margin: 40px;
text-align: center;
}
h1 {
font-size: 4rem;
line-height: 6rem;
text-transform: uppercase;
}
h2 {
font-size: 2rem;
line-height: 5rem;
color: #444;
}
p {
line-height: 1.5rem;
color: #666;
}
article {
margin: 20px 40px;
}
section {
margin: 0 0 60px;
}
/* 한글 폰트 */
.noto-sans-kr {
font-family: "Noto Sans KR", sans-serif;
font-optical-sizing: auto;
font-weight: weight;
font-style: normal;
}
.pretendard {
font-family: 'Pretendard', sans-serif;
}
.spoqa-han-sans-neo {
font-family: 'Spoqa Han Sans Neo', sans-serif;
}
.nanum-gothic {
font-family: "Nanum Gothic", sans-serif;
font-weight: 400;
font-style: normal;
}
.suit {
font-family: 'SUIT', sans-serif;
}
/* 영문 폰트 */
.inter {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: weight;
font-style: normal;
}
.poppins {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
.montserrat {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: weight;
font-style: normal;
}
.dm-sans {
font-family: "DM Sans", sans-serif;
font-optical-sizing: auto;
font-weight: weight;
font-style: normal;
}
.playfair-display {
font-family: "Playfair Display", serif;
font-optical-sizing: auto;
font-weight: weight;
font-style: normal;
}
'<tips>' 카테고리의 다른 글
| 네비게이션 메뉴는 <ul>와 <div>중 어떤 것을 사용해야 할까? (0) | 2026.03.27 |
|---|---|
| 코린이를 위한 HTML <head> 코드 추천 (0) | 2026.03.26 |
| 미디어쿼리 세팅을 위해 statcounter.com 활용하기 (0) | 2026.03.23 |
| 크롬 개발자 도구에서 미디어쿼리 확인하는 방법 (0) | 2026.03.23 |
| 프론트엔드 개발자와 UI 디자이너 추천 사이트 (0) | 2026.03.17 |