html 폰트를 적용해보자

 

 

웹 폰트 ​

 

여러분은 PPT, 한글, 워드 등에서 예쁜 폰트를 적용하고 싶을 때 어떻게 하시나요? 아마 무료 폰트를 찾아 다운로드한 후 컴퓨터에 설치한 후에 사용할 거예요. ​ 우리가 만드는 웹 사이트에도 투박한 기본 폰트보다는 예쁘고 특이한 폰트를 적용해 더 멋있는(?) 웹사이트를 만들 수 있답니다. ​ html 파일에서 폰트를 적용할 땐, PPT나 한글, 워드 등에서 사용하는 방식과 달리 보통 "웹 폰트"라는 것을 사용해요. ​ 웹폰트는 다운로드하여서 PC에 직접 설치하는 폰트 설치 방식과 달리 다른 온라인 서버에서 폰트를 불러와 화면에 표시하는 방식이에요. 즉, 폰트를 설치할 필요 없이 폰트를 적용할 수 있답니다! ​ 만약 "나눔 바른 고딕"이라는 폰트를 html 파일에서 사용하고 싶다면 "나눔 바른 고딕 웹폰트"라고 검색(구글링)하여 배포된 웹 폰트가 있는지 확인한 후 적용하면 된답니다. ​ 보편적으로 구글 폰트 (한글, 영어)와 눈누 라는 사이트에서 웹폰트를 다양하게 제공해요. 해당 사이트에서 웹 폰트를 적용하는 방법을 함께 실습해봅시다! ​ ​

 

웹 폰트 적용하기 (Google Fonts 활용)

 

​1. 구글 폰트 사이트로 들어갑니다. (주소: fonts.google.com) ​ 2. 언어를 한국어로 바꿔줍니다. (한국어 폰트 위주로 검색하기 편하도록) ​ 3. 원하는 폰트를 하나 골라 클릭합니다. (저는 나눔 명조 픽!) ​ 4. 원하는 폰트 굵기 (Regular, Bold, Extra Bold 등)를 선택하여 Select this style 버튼을 클릭합니다. * 지원하는 폰트 굵기는 폰트 종류에 따라 다릅니다. (1~5개 이상까지 다양) * 여러 개를 중복하여 선택할 수도 있습니다. (예를 들어, regular, bold, extra-bold를 모두 선택하면 웹사이트에서 3가지 모두 활용할 수 있습니다.) ​ 우측에 뜬 Use on the web 부분이 웹 폰트를 적용할 때 중요한 부분이에요. 혹은 @import 방식 중에 1가지 방식을 골라 웹 폰트를 불러올 수 있어요. 두 가지는 적용하는 방식이 약간 다르답니다! 1-1. 방식으로 웹 폰트 불러오기 아래와 같이 html 파일 내 head 태그 안에 표시된 부분을 복사하여 붙여 넣어 주세요. 1-2. @import 방식으로 웹 폰트 불러오기 구글 웹 폰트에서는 @import 방식으로 적용할 경우 아래의 코드를 추가하라고 나온답니다. 내부 스타일 시트 (head 태그 내 style 태그 안에 css 속성 적용)로 적용할 경우 위의 코드를 그대로 html의 head 태그 안에 추가해 주세요. 2. 웹 폰트 적용하기 웹 폰트를 무사히 불러왔다면 이제 적용해야겠죠? 아래의 화면 (구글 폰트 사이트)을 보면 폰트를 이렇게 적용하세요~라고 친절히(영어로😥) 나와있어요. 시키는 대로! CSS 속성으로 똑같이 적용하면 된답니다. CSS 파일 내에 아래와 같이 코드를 적으면 nanum-myeongjo라는 클래스를 가진 모든 태그가 나눔 명조로 바뀌고요, 만약 html 파일의 모든 텍스트를 나눔 명조로 설정하고 싶다면, 약간의 꼼수(?)로 body 태그 속성에 font-family를 적용하면 하위 태그 (즉 모든 태그)에 모두 폰트가 적용된답니다. 이전에도 언급했듯, body태그는 우리의 콘텐츠 영역을 모두 포함하고 있기 때문이에요. ​ 그리고 또 한 가지! 글자 굵기 속성이 있었죠? 만약 글자 굵기 속성을 여러 개 선택했다면 굵기도 다르게 적용할 수 있답니다. ​ 글자 굵기를 지정하는 속성 이름은 바로 font-weight ​에요. 속성 값으로는 숫자를 적어주면 되고, 구글 폰트 사이트에 나오는 이 숫자가 모두 글자 굵기를 나타낸답니다. 예를 들어, font-light라는 클래스는 regular(400)를, font-bold라는 클래스는 bold(700) 굵기로 표시하고 싶다면 아래와 같이 적용할 수 있겠죠?

 

[심화] 다른 형태의 웹 폰트 구글 폰트

 

이외의 사이트에서 웹 폰트를 적용할 때는 또 다른 방식으로 적용할 수도 있어요. 이때 폰트의 확장자로 otf, ttf, svg, woff 등이 있을 수 있는데, woff를 사용할 것을 추천드려요. (woff는 web open font format의 약자예요.) ​ 그리고 폰트 파일 자체를 다운로드하여서 상대 경로로 지정한 후 사용할 수도 있지만, 폰트 파일이 크면 프로젝트 자체가 무거워질 수 있으므로 추천하지는 않아요.​ 폰트를 적용하는 또 다른 방법으로 @font-face가 존재해요, @font-face 코드는 스타일시트 안에 작성하여 적용하며, 적용할 때 font-family의 이름은 코드에서 작성한 font-family 이름과 같아야 해요! 예시를 보시면 바로 이해가 되실 거예요.