본문으로 건너뛰기

Font

Font

The font of a web page significantly affects readability, style, and brand identity.

You can set a variety of fonts on your web page using CSS.


font-family

font-family is a CSS property that specifies the font to be used for the text on a web page.


How to Use

How to use font-family
element {
font-family: 'Font1', 'Font2', ...;
}
font-family usage example
body {
font-family: 'Times New Roman', Times, serif;
}
  • Priority: The web browser uses fonts in the order listed in the font-family property. If the first font is not installed on the user's system, the browser looks for the second font, then the third, and so on, until it finds an available font to use.

  • Fallback Fonts: To ensure text remains readable in case a specific font is not available on the user's system, it is good practice to include a generic font family (such as serif, sans-serif, monospace, etc.) at the end of the font-family list. These generic fonts are universally available across browsers and font installations.

  • In the example provided, the web browser first tries to use the "Times New Roman" font. If it is not available on the system, it attempts to use the "Times" font, and if that is also unavailable, it resorts to the generic serif font.


Major Default Fonts

Web browsers provide default fonts for several font categories.

There are three major default font categories provided by web browsers:

  1. Serif:

    serif
    • Features: The term 'serif' refers to a font style characterized by small lines or strokes attached to the end of larger strokes in letters.
    • Examples: Times New Roman, Georgia
    • Usage: Commonly used for body text, especially in lengthy documents or articles.

  1. sans-serif:

    sans-serif
    • Features: 'Sans' means 'without' in French, and 'sans-serif' fonts are characterized by not having small lines or strokes at the end of letters. These fonts convey a modern and clean look and are widely used in web and digital design.
    • Examples: Arial, Helvetica, Verdana
    • Usage: Commonly used for web services, advertising copy, logos, and more.

  1. monospace:

    monospace
    • Features: 'Monospace' fonts are characterized by each letter having the same width. These fonts are commonly used in code editors and text output by machines.
    • Examples: Courier New, Consolas, Monospace
    • Usage: Primarily used for code snippets and typewriter-styled design elements.

Notes

  • If a font name contains spaces, it is good practice to wrap it in quotes (" ").

    • Example: "Times New Roman"
  • If you want to use a specific font on a web page, you can provide the font file along with the webpage or use a web font service (e.g., Google Fonts).