• CSS Fonts
• CSS Web Safe Fonts
• CSS Fonts Fallbacks
• CSS Font Style
• CSS Font Size
• CSS Google Fonts
• CSS Great Font Parings
• CSS Font Property

웹사이트에 적합한 폰트를 선택하는 것이 중요합니다.

적합한 폰트를 선택하는 것은 사용자의 웹사이트 경험에 커다란 영향을 미칩니다.

적합한 폰트는 브랜드에 대한 강렬한 정체성을 만들어줄 수 있습니다.

읽기 쉬운 폰트를 사용하는 것이 중요합니다. 폰트는 텍스트에 가치를 부여합니다. 그래서 해당 폰트에 대한 적합한 컬러와 텍스트 크기를 선택하는 것도 중요합니다.

CSS에는 5개의 범용 글꼴 집합이 있습니다.

1. Serif (세리프) 폰트에는 각 철자의 가장자리에 작은 획이 있습니다. 격식과 우아함을 만듭니다.
2. Sans-serif (쌘 세리프) 폰트에는 매끈한 선이 있습니다(부착된 작은 획이 없습니다). 현대적이고 단순한 모양을 만듭니다.
3. Monospace (모노스페이스) 폰트에서 모든 철자들은 동일한 고정 너비를 가지며, 기계적인 모양을 만듭니다.
4. Cursive (컬씨브) 폰트는 인간의 손글씨를 모방합니다.
5. Fantasy (팬터시) 폰트는 장식적이고 재미있는 폰트입니다.

다른 모든 폰트 이름들은 범용 글꼴 집합들 중의 하나에 속합니다.


Note:
컴퓨터 스크린에서, serif 폰트보다 sans-serif 폰트가 읽기에 더 쉽다고 여겨집니다.

CSS에서, 텍스트의 폰트를 지정하기 위해서 font-family속성을 사용합니다.

font-family속성은 “fallback (대비책)” 시스템으로 여러 개의 폰트 이름을 가져서 브라우저/운영시스템 사이에서 최대한의 호환성을 보장합니다.
원하는 폰트로 시작하고 범용 글꼴 집합으로 끝마칩니다.(이용할 수 있는 다른 폰트가 없는 경우, 브라우저가 범용 글꼴 집합에서 유사한 폰트를 선택하도록)
폰트 이름은 쉼표(, 콤마)로 구분되어야 합니다.

Note:
폰트 이름이 한 단어 이상인 경우, 쌍따옴표로 표시해야 합니다.ex) “Times New Roman”

하기 예제에서는 3개의 문단에 대해 일부 다른 폰트를 지정합니다.

.p1 {
  font-family: "Times New Roman", Times, serif;
}
 
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
 
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Web Safe Fonts (웹 안전 폰트)는 모든 브라우저와 자치에 보편적으로 설치되는 폰트입니다.

하지만, web safe font가 100% 완전하게 있을 수는 없습니다. 폰트를 찾을 수 없거나 제대로 설치되지 않을 가능성이 항상 존재합니다.

그러므로, 항상 fallback 폰트를 사용하는 것이 매우 중요합니다.

이는 font-family속성에 유사한 'backup 폰트' 목록을 추가해야 하는 것을 의미합니다. 첫 번째 폰트가 적용되지 않을 경우, 브라우저는 차례로 다음 폰트 적용을 시도합니다. 항상 범용 글꼴 집합 이름으로 목록 명으로 끝내야 합니다.

하기 예제에는 3가지의 폰트 타입이 있습니다: Tahoma, Verdana, sans-serif. 두 번째(Verdana)와 세 번째(sans-serif) 폰트는 첫 번째 폰트가 발견되지 않을 경우를 대비한 백업(예비) 폰트입니다.

p {
  font-family: Tahoma, Verdana, sans-serif;
}