과거에는 HTML에서 <font> 태그를 사용해 텍스트의 글꼴을 지정했습니다. 하지만 이 태그는 현재 더 이상 사용되지 않는(deprecated) 요소로 분류되어 있으며, 최신 웹 표준에서는 지원되지 않습니다.
따라서 현재는 CSS를 사용하는 것이 올바른 방법입니다. 특히 font-family 속성을 활용하면 원하는 글꼴을 간편하게 적용할 수 있습니다.
기본 예제
아래 코드는 인라인 스타일(inline style)을 이용해 특정 문단의 글꼴을 변경하는 예시입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<!DOCTYPE html> <html> <body> <h2>Tutorialspoint</h2> <p>Learning videos</p> <p style = "font-family:'Courier New'">Learning content</p> </body> </html>
추가 팁
인라인 스타일 외에도 다음과 같은 방법으로 글꼴을 설정할 수 있습니다.
- <style> 태그 사용: 문서 내부에 CSS 규칙을 작성하여 여러 요소에 일괄 적용할 수 있습니다.
- 외부 CSS 파일 연결: 별도의 .css 파일을 만들어
<link>태그로 불러오면 유지보수가 쉬워집니다.
또한 font-family 속성에는 여러 글꼴을 쉼표(,)로 나열할 수 있습니다. 앞에 있는 글꼴부터 우선적으로 적용되며, 해당 글꼴이 없으면 다음 글꼴로 대체됩니다.
<p style="font-family: 'Courier New', Courier, monospace;">대체 글꼴이 적용된 텍스트</p>
웹 접근성과 호환성을 위해 마지막에는 serif, sans-serif, monospace 같은 일반(generic) 글꼴 계열을 함께 지정해 주는 것이 좋습니다.