---
title: CSS Fonts
slug: Web/CSS/CSS_Fonts
tags:
  - CSS
  - CSS Fonts
  - Overview
  - Reference
translation_of: Web/CSS/CSS_Fonts
---
<div>{{CSSRef}}</div>

<p><strong>CSS Fonts</strong>는 글꼴 관련 속성 및 글꼴 자원이 로드되는 법을 정의하는 CSS 모듈입니다. 이는 글꼴의 스타일을 정의할 수 있습니다, 글꼴 패밀리, 크기 또는 굵기 및 한 문자에 여러 자체(glyph)가 있는 글꼴에 사용되는 이형(variant) 자체와 같은 줄높이도 정의할 수 있습니다.</p>

<h2 id="참고">참고</h2>

<h3 id="속성">속성</h3>

<div class="index">
<ul>
 <li>{{cssxref("font")}}</li>
 <li>{{cssxref("font-family")}}</li>
 <li>{{cssxref("font-feature-settings")}}</li>
 <li>{{cssxref("font-kerning")}}</li>
 <li>{{cssxref("font-language-override")}}</li>
 <li>{{cssxref("font-size")}}</li>
 <li>{{cssxref("font-size-adjust")}}</li>
 <li>{{cssxref("font-stretch")}}</li>
 <li>{{cssxref("font-style")}}</li>
 <li>{{cssxref("font-synthesis")}}</li>
 <li>{{cssxref("font-variant")}}</li>
 <li>{{cssxref("font-variant-alternates")}}</li>
 <li>{{cssxref("font-variant-caps")}}</li>
 <li>{{cssxref("font-variant-east-asian")}}</li>
 <li>{{cssxref("font-variant-ligatures")}}</li>
 <li>{{cssxref("font-variant-numeric")}}</li>
 <li>{{cssxref("font-variant-position")}}</li>
 <li>{{cssxref("font-weight")}}</li>
 <li>{{cssxref("line-height")}}</li>
</ul>
</div>

<h3 id="규칙">@규칙</h3>

<dl>
 <dt>{{cssxref("@font-face")}}</dt>
 <dd>
 <div class="index">
 <ul>
  <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
  <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li>
  <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
  <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
  <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
  <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
  <li>{{cssxref("@font-face/src", "src")}}</li>
  <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
 </ul>
 </div>
 </dd>
 <dt>{{cssxref("@font-feature-values")}}</dt>
</dl>

<h2 id="안내서">안내서</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt>
 <dd>In this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">OpenType font features guide</a></dt>
 <dd>Font features or variants refer to different glyphs or character styles contained within an OpenType font. These include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. These are all referred to as OpenType Features, and are made available to use on the web via specific properties and a low-level control property — {{cssxref("font-feature-settings")}}. This article provides you with all you need to know about using OpenType font features in CSS.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts guide</a></dt>
 <dd><strong>Variable fonts</strong> are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.</dd>
</dl>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">설명</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#font', '')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>초기 정의</td>
  </tr>
 </tbody>
</table>