HTML에서 텍스트 글꼴을 변경하려면 style 속성을 사용합니다. style 속성은 특정 요소에 인라인(inline) 스타일을 직접 지정하는 방식으로, HTML <p> 태그와 함께 CSS의 font-family, font-size, font-style 등 다양한 글꼴 관련 속성을 조합하여 활용할 수 있습니다.
<font> 태그는 더 이상 사용하지 않습니다
HTML5에서는 과거에 글꼴을 지정하던 <font> 태그를 공식적으로 지원하지 않습니다. 해당 태그는 HTML5에서 폐기(deprecated)되었기 때문에, 반드시 CSS 스타일을 통해 글꼴을 변경해야 합니다.
style 속성 사용 시 주의사항
style 속성으로 지정한 인라인 스타일은 전역으로 설정된 다른 스타일보다 항상 우선 적용됩니다. 즉, HTML 문서 내 <style> 태그나 외부 스타일 시트(CSS 파일)에서 정의한 스타일이 있더라도, 인라인 스타일이 그것을 덮어쓰게(override) 됩니다. 따라서 일관된 스타일 관리를 위해서는 인라인 스타일 사용을 최소화하고, 필요한 경우에만 활용하는 것이 좋습니다.
주요 CSS 글꼴 속성 살펴보기
- font-family: 텍스트에 적용할 글꼴 종류를 지정합니다. 여러 개를 쉼표로 나열하면 앞의 글꼴부터 순서대로 적용을 시도합니다.
- font-size: 글자 크기를 px, em, rem 등의 단위로 지정합니다.
- font-style: 이탤릭체(italic) 등 글자의 기울임 스타일을 지정합니다.
예제 코드
아래 코드를 실행하면 HTML에서 글꼴을 변경하는 결과를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Font</title> </head> <body> <h1>Our Products</h1> <p style = "font-family:georgia,garamond,serif;font-size:16px;font-style:italic;"> This is demo text </p> </body> </html>
위 예제에서는 <p> 태그에 style 속성을 적용하여, Georgia와 Garamond 계열의 세리프(serif) 글꼴을 지정하고, 글자 크기를 16px로, 스타일을 이탤릭체로 설정했습니다. 브라우저에서 실행하면 해당 단락의 텍스트가 지정한 글꼴과 스타일로 표시되는 것을 확인할 수 있습니다.