CSS로 글꼴 변경하기
웹 페이지에서 글꼴(폰트)을 변경하려면 CSS의 font-family 속성을 사용합니다. 이 속성은 텍스트에 적용할 글꼴을 지정하며, 여러 개의 글꼴 이름을 쉼표(,)로 구분하여 나열할 수 있습니다.
글꼴을 여러 개 지정하는 이유는 대체 글꼴(fallback font) 때문입니다. 브라우저는 목록에서 왼쪽부터 순서대로 글꼴을 확인하고, 사용자 시스템에 해당 글꼴이 없으면 다음 글꼴로 넘어갑니다. 마지막에는 serif, sans-serif 같은 일반적인 글꼴 계열(generic family)을 지정해 주는 것이 좋습니다.
사용 예제
아래 코드를 실행하면 font-family 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "font-family:georgia,garamond,serif;"> Demo content </p> </body> </html>
코드 설명
위 예제에서는 문단(<p>) 요소에 세 가지 글꼴을 순서대로 지정했습니다.
- georgia: 첫 번째로 적용을 시도하는 글꼴입니다.
- garamond: Georgia가 시스템에 없을 경우 대신 사용되는 대체 글꼴입니다.
- serif: 앞의 두 글꼴 모두 사용할 수 없을 때, 브라우저 기본 명조 계열 글꼴로 표시됩니다.
참고 사항
글꼴 이름에 공백이 포함된 경우(예: Times New Roman) 반드시 따옴표로 감싸야 합니다. 또한 웹 폰트 서비스를 활용하면 방문자의 시스템에 글꼴이 설치되어 있지 않아도 원하는 서체를 일관되게 표시할 수 있습니다.