II. 텍스트 - 2. 웹 폰트 사용하기

📁Web Developing/CSS 기초

II. 텍스트 - 2. 웹 폰트 사용하기

Hush 2022. 6. 1. 21:50

웹 폰트를 사용하면 사용자 시스템에 없는 글꼴도 사용할 수 있다.

웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장해야 한다.

웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드해야 한다.

웹 폰트를 사용한 사이트에 사용자가 접속하면 웹 문서를 내려받으면서 웹 폰트도 사용자 시스템으로 단운로드된다.

웹 폰트 업로드하고 사용하기

요즘엔 인터넷 사이트에서 웹 폰트를 제공해 주는 경우 주로 링크해서 사용하지만, 그렇지 않은 글꼴이거나 자신이 가지고 있는 TTF 폰트를 변환해서 사용한다면 여기서 설명한 방법으로 직접 업로드해서 사용해야 합니다.

컴퓨터에서 사용하는 사용하는 글꼴은 트루타입이고 파일 확장자는 *.ttf입니다. 하지만 트루타입 글꼴은 파일 크기가 커서 웹에서 사용하기엔 적절하지 않다. 그래서 웹에 적합한 여러 글꼴이 등장했는데 그중에서 EOT, WOFF, WOFF2 파일이 많이 사용된다.

웹 폰트가 준비되었다면 @font-face속성을 사용하여 다음과 같이 웹 폰트를 정의합니다.

@font-face {
	font-family: <글꼴 이름>;
    src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ......];
}

폰트 파일이 준비되었다고 가정하고 예제를 보자.

        <style>
            @font-face {
                font-family: 'Ostrich';
                src:    local('Ostrich Sans'),
                        url('fonts/ostrich-sans-bold.woff') format('woff'),
                        url(....) format(....);
            }
        </style>

구글 폰트 사용하기

폰트 파일을 다운로드 할 필요 없이 여러 웹 폰트를 사용할 수 있는 구글 폰트를 활용해보자.

구글 폰트 사이트에 접속해 보자 ( http://fonts.google.com )

원하는 폰트를 찾아 들어가자.

파란 글씨인 Select this style을 클릭하자

상단의 <style>로 시작하는 코드는 <head>태그 아래에 넣어주고, font-family로 시작하는 코드는 내가 해당 폰트를 적용하고 싶은 스타일 태그에 속성값으로 넣어주자.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
        </style>
    </head>
    <body>
        <h1 style="font-family: 'Noto Sans KR', sans-serif;">레드향</h1>
        <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
        <p>레드향은 한라봉과 귤을 교배한 것으로</p>
        <p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </body>
</html>

저작자표시 (새창열림)