웹 폰트(Web font)

웹 폰트(Web font)

웹 페이지에서 사용자 정의 글꼴을 사용하여 보다 다양하게 스타일을 적용하는 방법을 살펴보겠습니다.

font-family 값 목록

HTML에 적용된 글꼴은 font-family속성을 사용하여 제어할 수 있습니다. font-family는 하나 이상의 값을 사용합니다. 웹 페이지를 표시할 때 브라우저는 사용할 수 있는 폰트를 찾을 때까지 폰트 모음 값 목록을 다음으로 이동합니다.

위 방법으로 사용해도 정상적으로 잘 작동하지만 폰트 선택이 제한적 입니다. 모든 환경에서 보장할 수 있는 폰트는 수소에 불가합니다. 그래서 등장한 것이 웹 폰트 입니다.

웹 폰트

CSS를 사용하면 웹사이트에 액세스할 때 웹사이트와 합께 폰트를 다운로드 하여 원하는 폰트를 지정할 수 있습니다.

1. CSS에 @font-face를 사용하여 웹 폰트를 설정합니다.

@font-face {
    font-family: '폰트 이름';
    src: url('폰트 주소');
}

2. CSS로 원하는 부분에 폰트를 설정합니다.

p {
    font-family: '폰트 이름';
}

웹 폰트 사용시 주의사항

• 폰트는 일반적으로 유로입니다. 비용을 지불하거나 무료 폰트를 이용해야 합니다.
• 폰트 파일을 나열하는 순서가 중요합니다. 여러 폰트 목록이 있을때 브라우저는 첫 번쨰 파일부터 선택합니다.

@font-face 구문

font-family

font-family는 폰트를 참조할 이름을 지정합니다. CSS에서 일관되게 사용하는 경우 원하는 무엇이든 될 수 있습니다.

font-weight

font-weight는 폰트의 가중치를 설정합니다. 동일한 폰트의 여러 굵기를 가져오는 경우 사용합니다.

font-style

font-style는 폰트의 스타일을 설정합니다. 동일한 폰트의 여러 스타일을 가져오는 경우 사용합니다.

src

src는 CSS로 가져올 폰트의 경로(url)와 폰트 파일의 형식(format)을 지정합니다.

font-variant, font-stretch

font-variant, font-stretch을 이욯하면 폰트를 더욱 다양하게 표현할 수 있습니다.

더 알아보기