[HTML+CSS+JavaScript] CSS font-face 사용법
font-face는 CSS의 규칙으로, 웹 페이지에서 사용자 지정 글꼴을 정의하고 사용할 수 있게 합니다. 이를 통해 사용자의 컴퓨터에 해당 글꼴이 설치되어 있지 않더라도, 웹 페이지에서 원하는 글꼴을 표시할 수 있습니다.
|
※ 기본문법
/* 사용자 정의 글꼴을 정의하는 @font-face 규칙 */
@font-face {
/* font-family: CSS에서 사용할 글꼴 이름을 지정합니다. */
font-family: 'CustomFont';
/* src: 글꼴 파일의 경로와 형식을 지정합니다. */
src: url('CustomFont.woff2') format('woff2'), /* WOFF2 형식의 글꼴 파일 */
url('CustomFont.woff') format('woff'); /* WOFF 형식의 글꼴 파일 */
/* font-weight: 글꼴의 굵기를 설정합니다. 여기서는 일반 굵기(normal)로 설정합니다. */
font-weight: normal;
/* font-style: 글꼴의 스타일을 설정합니다. 여기서는 일반 스타일(normal)로 설정합니다. */
font-style: normal;
}▶ @font-face로 글꼴을 정의한 후, CSS에서 해당 글꼴을 다음과 같이 적용할 수 있습니다:
body {
font-family: 'CustomFont', sans-serif;
}▶ 웹 브라우저마다 지원하는 글꼴 형식이 다를 수 있으므로, 여러 형식의 글꼴 파일을 제공하는 것이 좋습니다
WOFF2: 최신 브라우저에서 지원하는 형식입니다.
WOFF: 널리 사용되는 형식으로, 대부분의 브라우저에서 지원됩니다.
TTF/OTF: TrueType 및 OpenType 형식으로, 일부 브라우저에서 지원됩니다.
EOT: 이전 버전의 Internet Explorer에서 사용됩니다.
SVG: 일부 구형 iOS 장치에서 사용됩니다.
※ 사용예시입니다.
<!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+JavaScript] 눈누 웹 폰트 사용하기
[HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기 웹폰트(Web Font)는 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도, 웹 페이지에서 원하는 폰트를 표시할 수 있게 해주는 기술입니다. 이를 통해
happyldh.tistory.com
'프로그래밍 > html+css+js' 카테고리의 다른 글
| [html/css] text-shadow 텍스트에 그림자 넣기 (효과 주기) (0) | 2025.03.13 |
|---|---|
| [HTML+CSS] button 태그 css 버튼 스타일 꾸미기 (2) | 2025.01.29 |
| [HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기 (1) | 2025.01.19 |
| [HTML+CSS+JavaScript] CSS font-family 사용법 (1) | 2025.01.17 |
| [HTML+CSS+JavaScript] CSS 텍스트(text) 관련 속성 (1) | 2025.01.17 |