Webfont 에 대해서

2019-12-06
  • font
  • web

    • css 의 font-family 속성을 사용하게 되면, 사용자의 로컬에 다운받아져있는(기본 폰트이거나 사용자가 어떤 홈페이지를 방문하여 받아진 폰트이거나) 폰트만을 사용한다. 때문에, 대안 폰트까지 줄줄 적는 것이 일반적인 관습이다.

    Webfont 란 브라우져가 서버로부터 폰트를 다운받아 사용하는 폰트를 의미하는 것 같다. @font-face 란 지시어를 통해 웹에서 폰트를 다운 받도록 브라우져에게 명령할 수 있다.

    폰트형식들

    - EOT(Embedded Open Type): IE에서만 통용되는 웹폰트
- TTF(TrueType format)/OTF(OpenType format): 컴퓨터 폰트로 널리 사용되는 폰트. 워드프로세싱이나 전자출판에도 사용됨.
- WOFF(Web Open Font Format): TrueType 이나 OpenType 을 압축한 Webfont
- SVG(Scalable Vector Graphic): 벡터 그래픽 파일. 용량이 크다.

    그래서 어떻게 적용하는데?

    1. .ttf, .otf 의 기본 글꼴파일을 찾는다.
    2. Font Squirrel 에 업로드하여 변환한다.
    3. 변환된 글꼴파일을 웹에서 접근가능한 경로에 업로드하고 해당 경로를 사용한다.
    @font-face {
  font-family: <a-remote-font-name>;
  src: <source> [, <source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

    예시 - SCSS 변수가 포함되어 있습니다.

    @font-face {
    font-family: 'Spoqa Han Sans Custom';
    font-weight: 700;
    src: local('Spoqa Han Sans Bold'),
    url('#{$base-font-path}/SpoqaHanSansBold.woff2') format('woff2'),
    url('#{$base-font-path}/SpoqaHanSansBold.woff') format('woff'),
    url('#{$base-font-path}/SpoqaHanSansBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans Custom';
    font-weight: 400;
    src: local('Spoqa Han Sans Regular'),
    url('#{$base-font-path}/SpoqaHanSansRegular.woff2') format('woff2'),
    url('#{$base-font-path}/SpoqaHanSansRegular.woff') format('woff'),
    url('#{$base-font-path}/SpoqaHanSansRegular.ttf') format('truetype');
}

body {
  font-family: 'Spoqa Han Sans Custom'
}
    • 위의 @font-face 의 font-family 속성이 다 같지만 일반적인 브라우져들은 html tag 에 따라 알아서 적절한 폰트를 보여준다고 한다. <bold>, <Strong> 같은..
    • Spoqa Han Sans Custom (이름은 원하는데로 작성가능) 라는 글꼴 이름을 한 번만 선언한 다음 eot 형식과 woff 형식을 순차적으로 참조, 위의 글꼴에서 eot 포멧이 없어서 그냥 생략함.
    • 위의 예제에선 없지만, url의 local(※) 값이 있다면 괄호 안쪽에 포함된 ※ 기호는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정한 것. 굳이 2byte짜리 특수문자를 사용한 이유는 Mac OS에서 2byte짜리 문자열로 된 시스템 글꼴 이름은 아예 처리하지 않기 때문이다.

    FOUT, FOIT, FOFT

    • FOUT(Flash of Unstyled Text) : IE 계열 브라우져의 처리방식. 웹폰트 로딩 시, Fallback 폰트 상태(unstyled) 에서 폰트가 로딩되고 폰트가 변경되면서 텍스트가 번쩍이는 것을 뜻함.
    • FOIT(Flash of Invisible Text) : 그 외의 브라우져의 처리방식. 웹폰트가 로딩 될 때 까지 텍스트를 화면에서 보여주지 않다가 로딩이 다되면 번쩍 하면서 나타나는 것을 뜻함. 3초 이상 로딩되지 않으면 Fallback 폰트를 보여준다고 함.
    • FOFT(Flash of Faux Text) : 웹폰트 스타일에 font-weight, font-style 가 존재하면 브라우져가 임의로 굵기 스타일을 생성하다가 로딩 후 변경하는 형식. 시스템글꼴 -> 웹폰트 Regular -> 웹폰트 Bold

    FOIT 방식의 브라우져에서 강제로 FOUT 방식을 사용할 수 있는 Font Face Observer 라이브러리가 있다고 한다.
    라이브러리를 사용하지 않아도 CSS 의 font-display 를 사용하면 방식을 조절할 수 있다고 한다.

    .some-class {
  font-display: auto; //브라우져 기본 전략사용
  font-display: block; //FOIT 와 동일
  font-display: swap; //FOUT 와 동일
  font-display: fallback; //100ms 동알 FOIT, 그뒤는 FOUT
  font-display: optional; //fallback 과 비슷한데 다운로드 받은 뒤, 네트워크 상태에 따라 브라우져의 전략에 맡김
}

    서브셋 : 원하는 문자만 사용해서 폰트 크기를 줄이는 방법이다.

    출처