HTML DOM Style fontFamily 속성 – 웹 요소 글꼴 설정 방법

HTML DOM Style의 fontFamily 속성은 선택한 요소에 적용할 글꼴 목록(font list)을 설정하거나 현재 지정된 글꼴 값을 가져올 때 사용됩니다. 이 속성은 CSS의 font-family 속성과 동일한 역할을 하며, 자바스크립트를 통해 동적으로 요소의 글꼴을 변경할 수 있습니다.

글꼴을 지정할 때는 웹 세이프 폰트(Web Safe Fonts)를 우선 사용하고, 여분의 대체 글꼴을 함께 명시하는 것이 좋습니다. 이렇게 하면 사용자의 운영체제나 브라우저 환경에 따라 특정 글꼴이 지원되지 않더라도 비슷한 스타일로 표시될 수 있습니다.

문법(Syntax)

fontFamily 속성 설정

object.style.fontFamily = "font1, font2, etc.|initial|inherit"

여기서 font1, font2는 쉼표(,)로 구분된 글꼴 목록입니다. 브라우저는 앞에서부터 순서대로 글꼴을 적용하려고 시도하며, 첫 번째 글꼴을 사용할 수 없으면 두 번째 글꼴, 그다음 글꼴 순으로 차례대로 적용됩니다.

initial – 해당 속성값을 기본(default) 값으로 되돌립니다.
inherit – 부모 요소의 fontFamily 속성값을 상속받습니다.

예제(Example)

아래 예제에서는 버튼을 클릭하면 리스트 항목(li)의 글꼴이 한 번에 변경되도록 구현했습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    li{
        font-size: 1.1em;
        background-color: snow;
        font-family: cursive;
    }
</style>
<script>
    function changeFontFamily() {
        for(var i=0;i<3;i++){
            document.getElementsByTagName("li")[i].style.fontFamily="Sans-Seriff";
        }
        document.getElementById("Sample").innerHTML="위 리스트의 글꼴이 Helvetica로 변경되었습니다.";
    }
</script>
</head>
<body>
    <ul>
        <li>리스트 항목 1입니다.</li>
        <li>리스트 항목 2입니다.</li>
        <li>리스트 항목 3입니다.</li>
    </ul>
    <p>아래 버튼을 클릭하면 위 리스트 항목들의 글꼴이 변경됩니다.</p>
    <button onclick="changeFontFamily()">글꼴 변경하기</button>
    <p id="Sample"></p>
</body>
</html>

실행 결과(Output)

페이지를 처음 열면 각 리스트 항목은 CSS에서 지정한 cursive 글꼴로 표시됩니다.

HTML DOM Style fontFamily 속성 – 웹 요소 글꼴 설정 방법

이후 “글꼴 변경하기(Change Font Family)” 버튼을 클릭하면 자바스크립트 함수가 실행되어 모든 리스트 항목의 글꼴이 새로운 값으로 바뀌고, 그 결과가 화면에 출력됩니다.

HTML DOM Style fontFamily 속성 – 웹 요소 글꼴 설정 방법

정리

fontFamily 속성은 여러 개의 글꼴을 쉼표로 나열해 폰트 대체(fallback) 전략을 세울 수 있다는 점이 핵심입니다. 웹 세이프 폰트를 먼저 지정하고, 원하는 서체를 추가로 명시하면 다양한 환경에서도 일관된 타이포그래피를 유지할 수 있습니다.