Font Family (Họ phông chữ) trong CSS

Thuộc tính CSS font-family được dùng để đặt một phông chữ cụ thể cho phần tử được chọn. Khuyến khích sử dụng web-safe fonts bằng cách chỉ định thêm các phông chữ dự phòng (fallback fonts) để đảm bảo tương thích cross-browser.

Cú pháp

Selector {
  font-family: /*value*/
}

Ví dụ 1: Font-family cơ bản

<!DOCTYPE html>
<html>
<head>
<style>
  h2 { background-color: thistle; font-family: "Magneto", Arial; }
  p { font-family: "Segoe Print", serif; font-size: 1.4em; }
</style>
</head>
<body>
  <h2>Learn Fortran</h2>
  <p>Fortran, as derived from Formula Translating System, is a general-purpose, imperative programming language. It is used for numeric and scientific computing.</p>
</body>
</html>

Kết quả

Ví dụ 2: Font-family cho bảng

<!DOCTYPE html>
<html>
<head>
<style>
  th { font-family: "Franklin Gothic Book", Arial; border: thin solid blue; }
  td { font-family: "Lucida Console", serif; font-size: 1.1em; box-shadow: inset 0 0 3px black; }
  caption { font-family: Broadway; font-size: 24px; }
</style>
</head>
<body>
  <table>
    <caption>Demo Table</caption>
    <tr><th>DEMO 1</th><th>DEMO 2</th></tr>
    <tr><td>demo a</td><td>demo b</td></tr>
    <tr><td>demo c</td><td>demo d</td></tr>
  </table>
</body>
</html>

Kết quả

Cấu trúc font-family stack (font stack):

font-family: "Preferred Font", "Fallback Font 1", "Fallback Font 2", generic-family;

5 Generic Font Families (họ phông chữ chung):

• serif - có chân (Times New Roman, Georgia)
• sans-serif - không chân (Arial, Helvetica, Roboto)
• monospace - độ rộng cố định (Courier New, Consolas, Fira Code)
• cursive - viết tay (Brush Script, Comic Sans)
• fantasy - trang trí (Impact, Copperplate)

Web-safe fonts phổ biến: Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, Trebuchet MS, Courier New, Lucida Console.

Web Fonts (Google Fonts, Adobe Fonts): Sử dụng @import hoặc <link> để tải font tùy chỉnh, sau đó dùng trong font-family.