Web fonts

김동현·2023년 1월 18일

목록 보기

16/24

Web fonts

브라우저 및 운영체제에 따라 지원하는 폰트가 다르다.
font-family의 글꼴 스택과 Web-safe 폰트 및 기본 시스템 폰트로 웹 사이트를 구성할 수 있지만 테스트 작업량이 많아진다.

CSS를 사용하면 웹에서 사용할 수 있는 글꼴 파일을 지정하여 웹 사이트에 액세스할 때 웹 사이트와 함께 다운로드할 수 있다.

우선, @font-face 의 ruleset으로 다운로드할 폰트 파일을 지정한 후 CSS의 시작부분에 위치시킨다.

@font-face {
  font-family: "myFont";
  src: url("myFont.woff2");
}

@font-face at-rule 뒤에서 부터 myFont라는 글꼴을 이용할 수 있다.

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

웹 폰트를 사용할 때 주의할 점은 다음과 같다.

폰트는 일반적으로 무료로 사용할 수 없다.
돈을 지불하거나 다른 라이센스 조건을 따라야 한다.
모든 메이저 브라우저는 WOFF/WOFF2 ( Web Open Font Fommat 1, 2 ) 를 지원한다.
심지어 IE9도 WOFF를 지원한다.
WOFF2는 가변 폰트, chromatic 폰트, font collections를 포함한 OpenType 및 TrueType 사양을 지원한다.
font-family의 나열 순서에 따라 브라우저가 선택하는 폰트가 달라진다.
그렇기 때문에 선호되는 형식부터 나열해야 한다.
즉, WOFF2, WOFF를 먼저 배치하고 그 이후에 이전 형식을 나열한다.
레거시 브라우저에서 작업해야 하는 경우 레거시 브라우저가 다운로드 할 수 있는 EOT ( Embedded Open Type ) , TTF (True Type Font ) 및 SVG 웹 폰트를 제공해야 한다.

Finding fonts

무료 폰트 제공 사이트:

Generating the required code

다음의 단계를 따라 폰트를 적용하기 위해 필요한 코드를 생성하자.

상용 및 웹 프로젝트에서 폰트를 적용하려는 경우 라이센스 요구 사항을 충족했는지 확인한다.
Webfont Generator로 이동한다.
폰트를 업로드하고 변환된 웹폰트를 다운로드 한다.
일반적으로 폰트 생성을 위한 웹 서비스는 파일크기를 제한한다.
이러한 경우 다음의 툴들을 이용하자.
- sfnt2woff-zopfli for converting ttf to woff
- fontforge for converting from ttf to svg
- batik ttf2svf for converting from ttf to svg
- woff2 for converting from ttf to woff2
css를 작성한다.

@font-face {
  font-family: "zantrokeregular";
  src: url("fonts/zantroke-webfont.woff2") format("woff2"), url("fonts/zantroke-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

font-family: "zantrokeregular", serif;

Online font service

Google Fontes를 제외한 다른 서비스들은 구독 기반으로 제공된다.

@font-face in more detail

@font-face at-rule에 대해 자세히 살펴보자.

@font-face {
  font-family: "zantrokeregular";
  src: url("zantroke-webfont.woff2") format("woff2"), url("zantroke-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

src : CSS로 가져올 폰트 파일의 경로와 파일의 포맷을 지정한다.
포맷지정은 선택 사항이지만 브라우저가 사용할 수 있는 글꼴을 더 빨리 결정할 수 있기 때문에 선언하는게 더 유리하다.
여러 개의 형식 선언을 쉼표로 구분해서 나열할 수 있다.
font-family 와 같이 브라우저는 캐스케이드 규칙에 따라 검색하기 때문에 처음에 WOFF2와 같은 선호하는 형식을 지정하는게 좋다.

font-weight / font-style : 폰트의 weight와 기울임 여부를 지정한다.
동일한 폰트에 다른 weight와 style을 적용할 때 같은 이름으로 선언할 수 있다.

서로 다른 weight와 style에 각각 다른 이름을 지정한 경우:

@font-face {
    font-family: 'DroidSerifRegular';
    src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerifItalic';
    src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerifBold';
    src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerifBoldItalic';
    src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

이렇게 하면 다른 weight, style이 필요할 때마다 font-weight:normal;font-style:normal로 기본 스타일로 재설정하여 브라우저가 다운로드한 폰트 위에 weight 와 style를 적용하지 못하게 해야한다.
이렇게 하면 CSS가 다루기 힘들뿐만 아니라 @font-face 를 지원하지 않는 브라우저 또는 폰트파일이 제대로 다운로드되지 않는 경우 weight 및 style이 제거된다.

서로 다른 weight와 style에 같은 이름을 지정한 경우:

@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}