굴림체에서 벗어나자! 웹폰트 활용하기 [칼럼]
지난 ‘웹페이지에 굴림체만 보이는 이유, 웹폰트 이해하기’에서는 웹의 매체 특성 때문에 OS에 설치되지 않은 글꼴을 사용하려면 웹폰트를 사용해야 한다고 말씀드렸습니다. 그리고 웹폰트의 아름다움과 그 가능성에 대해 함께 알아보았는데요. 이번에는 이런 웹폰트를 어떻게 하면 잘 활용할 수 있는지, 기초부터 차근차근 알아보도록 하겠습니다.
웹폰트 불러와 사용하기
웹페이지는 많은 정보로 이루어져 있습니다. 아주 기본적인 텍스트 정보부터 사진, 그림과 같은 이미지 정보는 물론 동영상 정보도 불러올 수도 있습니다. 이 모든 것들은 웹페이지에서 HTML 태그와 몇 가지 기술로 ‘불러오는’ 것들입니다. 호출한다고 표현하기도 하는데, 영어로는 loading으로 쓰곤 합니다. 웹폰트도 다르지 않습니다. 웹페이에서 ‘불러와(loading)’ 사용하는 것일 뿐입니다. 그럼 웹폰트는 어떻게 불러올까요?
가장 먼저 웹페이지에서 사용하고 있는 CSS파일 안에서 불러오기(import) 할 수 있습니다. 만약 index.html 에서 style.css를 사용하고 있습니다. 그럼 style.css의 상담에 다음과 같은 코드를 넣어 웹폰트를 불러올 수 있습니다.
@import url...
Top
