나눔스퀘어 폰트 적용하기 - team-wedev/wedev GitHub Wiki

NanumSquare font 적용하기

해당 글은 웹 폰트 사용과 최적화의 최근 동향과 웹 폰트 최적화를 참고해서 만들었습니다.

네이버에서 제공하는 font 인 NanumSquare를 여러 브라우저에 적용하기 위해서는 이를 각 브라우저 환경에 맞는 형태로 변형시켜주어야 합니다. moonsapm 님이 이 작업을 해주셨다. 아래의 링크에 접속하여 이를 설치합니다.

moonspam님의 레포지토리

Next.js 에서는 이와 같은 파일을 static 디렉토리에 위치시키는 걸 추천합니다. 이 이유는 프로덕션 단계에서 CDN을 이용할 경우 그에 맞는 prefix를 제공하주기 때문인데, 자세한 내용은 해당 링크 를 참조합니다.

이후 같은 디렉토리에 @font-face를 통해 글꼴을 정의해야한다.

@font-face {
  font-family: NanumSquare;
  src: url(NanumSquareR.eot) format('embedded-opentype'),
    url(NanumSquareR.ttf) format('truetype'),
    url(NanumSquareR.woff) format('woff');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: NanumSquare;
  src: url(NanumSquareB.eot) format('embedded-opentype'),
    url(NanumSquareB.ttf) format('truetype'),
    url(NanumSquareB.woff) format('woff');
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: NanumSquare;
  src: url(NanumSquareEB.eot) format('embedded-opentype'),
    url(NanumSquareEB.ttf) format('truetype'),
    url(NanumSquareEB.woff) format('woff');
  font-style: normal;
  font-weight: 800;
}

웹 폰트의 문제점

웹 폰트의 로딩이 늦어져 화면에 텍스트가 로딩되지 않거나 다른 텍스트에 비해 늦게 로딩되는 경우가 존재합니다.

브라우저의 렌더링 과정

브라우저는 CSS Object Model을 생성하는 과정에서. 외부 웹 폰트 링크로 정의된 부분을 만나고 해당 폰트 파일을 다운로드 하기 시작합니다. 그러나 그리기 단계에서 외부 링크로 연결된 파일의 로드가 완료되지 않으면, 이에 대한 렌더링을 차단합니다.

FOIT vs FOUT

렌더링 방식은 브라우저 마다 다른데, 크게 IE 계열 브라우저와 최근 브라우저로 나눠진다고 합니다. IE 계열의 브라우저는 FOUT(Flash Of Unstyled Text) 방식으로 렌더링 차단을 처리하고, 그 외의 브라우저는 FOIT(Flash Of Invisible Text)방식으로 렌더링 차단을 처리합니다.

웹 폰트가 적용될 때는 텍스트의 번쩍임(flash of text)이 발생합니다. 웹 폰트가 적용되지 않은 폴백 폰트 상태(unstyled)에서 폰트가 바뀌면서 이러한 현상이 발생합니다.

Font Face Observer 라이브러리를 사용하면 사용할 웹폰트의 로딩상태를 추적하여 다양한 전략을 사용할 수 있습니다.

CSS font-display

우리는 MDN font-display 를 이용하여 FOIT과 동일하게 동작하도록 했습니다.

* {
    font-family: 'NanumSquare', sans-serif;
    font-display:'block';
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

_document.tsx

public render() {
    return (
      <Html>
        <Head>
          <link
            rel="stylesheet"
            type="text/css"
            href="/static/fonts/styles.css"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }

위와 같이 <head/> 에 NanumSquare 폰트를 추가하며 마무리했습니다.