본문 바로가기
칼럼

이롭게 바탕체 웹사이트에 적용하기

글쓴이 Alice Kim() 2017년 02월 07일

지난 2월 1일 ‘이롭게 바탕체’가 공개되고 많은 문의가 있었습니다. 그 중에서 웹사이트나 개인 블로그에 ‘이롭게 바탕체’를 적용하고 싶다는 이야기도 많이 있었고요. 그래서 ‘이롭게 바탕체’를 웹에서 사용하는 방법에 대해 설명드리려고 합니다.

우리가 웹사이트에서 보는 글자는 웹페이지의 외형을 결정하는 언어인 CSS 파일에 정의된대로 서체(font-family)가 적용됩니다. CSS에서 사용자의 기기에 설치되어있는 폰트나 서버에서 제공되는 웹폰트의 이름을 부르면 브라우저가 해당 서체를 불러와서 글자를 그려냅니다. 십여 년 전에는 다양한 폰트를 사용하기 위해 글자를 이미지로 만들어 올렸지만, 웹기술의 발달로 웹폰트를 사용할 수 있게 된 이후로 다양한 폰트를 이미지로 대체하지 않고도 예쁜 글자를 사이트에 적용할 수 있게 되었죠. 이렇게 된 데는 반응형웹이나 SEO등의 기술과도 관련이 있고요.

잠시 옆길로 샜던 것 같은데요, ‘이롭게 바탕체’를 웹사이트나 블로그에 적용하려면 CSS 파일을 수정해야한다는 이야기를 하고싶었습니다. 그럼 적용하는 방법을 바로 알려드릴게요.

이롭게 바탕체 적용하기

첫번째 방법: @import 하기

  1. 내 웹사이트의 css파일 상단에 아래의 css코드를 추가한다.
  2. 이롭게 바탕체를 적용하고 싶은 곳에 font-family를 ‘Iropke Batang’으로 지정한다.

See the Pen Iropke Batang CSS by Alice (@Alice-iropke) on CodePen.

두번째 방법: <link> 태그 사용하기

  1. 웹사이트의 html파일 또는 블로그의 스킨 파일을 열어 <head>태그 안쪽에 아래의 코드를 추가합니다. (웹폰트를 빨리 불러올 수 있게 다른 css보다 위쪽에 넣어주시면 좋습니다.)
  2. font-family를 적용하는 것은 첫번째와 동일합니다.

See the Pen Iropke Batang CSS - by Alice (@Alice-iropke) on CodePen.

이롭게 바탕체 웹폰트를 간단하게 추가할 수 있는 CSS코드를 알려드렸습니다. 직접 웹폰트를 다운로드 받아서 적용하는 방법이 궁금하시다면 댓글 남겨주세요. 조금 더 자세하게 알려드리겠습니다.

이롭게 바탕체를 웹에서 예쁘게 쓰는 팁

웹에 적용할 때는 웹폰트를

TTF/OTF 파일을 다운로드 받아서 개인 컴퓨터에 설치한 뒤 웹사이트에서 CSS로 서체만 적용한다면 내 컴퓨터에 있는 폰트를 적용하는 것이라 브라우저가 폰트를 조금 다르게 그려낼 수 있어요. 웹전용으로 힌팅 된 웹폰트를 사용하는 것이 웹페이지에서 폰트가 깔끔하게 보이는 비결입니다.

폰트 사이즈를 px단위에 꼭 맞게

폰트 사이즈를 처음부터 정수값의 px단위로 지정하거나, 사이즈를 px단위로 계산했을 때 결과값이 정수로 나누어 떨어지게 적용하는 것이 좋습니다. 이롭게 바탕체는 px단위로 힌팅이 되어있어서 (특히 데스크탑에서는) px단위를 맞춰서 폰트 사이즈를 지정해주어야 더 예쁘게 보여요. 요즘의 모바일 기기는 대부분 레티나 디스플레이라 해상도가 높아서 폰트가 찌그러져 보일 확률이 낮습니다.

사이즈에 따라 달라지는 글자 렌더링 예시

'이롭게 바탕체'를 간단하게 css링크해서 사용하는 방법과 조금 더 예쁘게 보이는 방법에 대해 나누어보았습니다. 웹사이트나 개인 블로그에 이롭게 바탕체를 적용하실 때 궁금한 점이 있다면 댓글로 남겨주세요.

※ 위에서 공유한 css링크는 개인 사용자를 위한 것입니다. 상업적인 목적의 웹사이트를 제작하실 때는 웹폰트를 다운받아서 직접 서버에 업로드하여 이용해주세요.

※ 이롭게 바탕체는 오픈 폰트 라이센스 정책을 가지고 있기 때문에 상업적 용도를 포함하여 누구나 자유롭게 사용할 수 있습니다. 다만 이롭게 바탕체를 임의로 판매하거나 폰트를 수정하여 유료로 재판매하는 것은 금지합니다.