[HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기
웹폰트(Web Font)는 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도, 웹 페이지에서 원하는 폰트를 표시할 수 있게 해주는 기술입니다. 이를 통해 웹 디자이너와 개발자는 다양한 폰트를 활용하여 웹사이트의 디자인과 가독성을 향상시킬 수 있습니다.눈누 웹폰트는 한국에서 인기 있는 무료 웹폰트 플랫폼입니다. 눈누는 디자이너, 개발자, 크리에이터들이 상업적 이용이 가능한 무료 폰트를 쉽고 빠르게 다운로드하거나 웹에서 바로 사용할 수 있도록 지원합니다. 저작권 걱정 없이 사용할 수 있어 특히 한국어 폰트를 찾는 사용자들 사이에서 큰 인기를 얻고 있습니다. |
1. 눈누 폰트 웹사이트 접속하기
1) 브라우저에서 "눈누웹폰트"를 검색하여 사이트에 접속합니다. (바로가기)
2) 원하는 폰트를 선택합니다.
3) 여기서는 넥슨 Lv.2 고딕을 선택하였습니다.
5) 복사 기능을 이용하여 소스를 복사하여 이용하시면 됩니다.
※ 사용예시입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- CSS 스타일 정의 -->
<style>
/* NEXON Lv2 Gothic 폰트를 외부에서 가져와서 정의 */
@font-face {
font-family: 'NEXON Lv2 Gothic';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
font-weight: normal; /* 폰트 굵기를 기본값으로 설정 */
font-style: normal; /* 폰트 스타일을 기본값으로 설정 */
}
/* MaplestoryOTFBold 폰트를 외부에서 가져와서 정의 */
@font-face {
font-family: 'MaplestoryOTFBold';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Bazzi 폰트를 외부에서 가져와서 정의 */
@font-face {
font-family: 'Bazzi';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/Bazzi.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* 본문 텍스트 기본 설정 */
body {
font-weight: 300; /* 기본 글꼴 두께 설정 */
}
/* NEXON Lv2 Gothic 폰트 적용 */
p.font1 {
font-family: "NEXON Lv2 Gothic", sans-serif;
}
/* MaplestoryOTFBold 폰트 적용 */
p.font2 {
font-family: "MaplestoryOTFBold", sans-serif;
}
/* Bazzi 폰트 적용 */
p.font3 {
font-family: "Bazzi", sans-serif;
}
</style>
</head>
<body>
<!-- NEXON Lv2 Gothic 폰트를 적용한 섹션 -->
<h3>넥슨 Lv.2 고딕</h3>
<p class="font1">
행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
</p>
<!-- MaplestoryOTFBold 폰트를 적용한 섹션 -->
<h3>넥슨 메이플스토리</h3> <!-- <1/h3> 오타 수정 -->
<p class="font2">
행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
</p>
<!-- Bazzi 폰트를 적용한 섹션 -->
<h3>넥슨 배찌체</h3>
<p class="font3">
행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
</p>
</body>
</html>♠ 결과
'프로그래밍 > html+css+js' 카테고리의 다른 글
| [HTML+CSS] button 태그 css 버튼 스타일 꾸미기 (2) | 2025.01.29 |
|---|---|
| [HTML+CSS+JavaScript] CSS font-face 사용법 (0) | 2025.01.19 |
| [HTML+CSS+JavaScript] CSS font-family 사용법 (1) | 2025.01.17 |
| [HTML+CSS+JavaScript] CSS 텍스트(text) 관련 속성 (0) | 2025.01.17 |
| [HTML+CSS+JavaScript] CDN URL 모음 (1) | 2025.01.16 |
