최근 까지 가급적 웹폰트를 사용하지 않았는데요. 웹폰트 사용시 웹폰트가 로딩될때 까지 약간의 문제나 사소하게 발생하는 부분이 자연스럽지 못해서 사용을 안했는데 다시 사용하면서 자연스럽고 무리없이 웹폰트 사용이 가능해 진 듯해서 다시 사용하고 있습니다.

 

여기 라이믹스 꿀팁에도 최근 나눔고딕을 적용해서 사용 중이고 사용하지 않던 커뮤니티에도 웹폰트를 적용했습니다.

 

이번에 적용하면서 웹폰트 사용이 느껴지지 않을 정도로 자연스럽게 적용되는 것이 어떤 것이 작용해서 그런지 살펴보았는데 몇가지 기술이 도움을 주는 것 같네요.

 

간단하게 빠르게 로딩되어서 자연스럽게 웹폰트가 사이트에 적용되길 바란다면 css에서 웹폰트를 불러오는 @import url(); 방식 보다는 html에서 <link> 로 로딩하는게 좋은 것 같습니다.

 

구글 웹폰트에서 웹폰트를 사용하려고 폰트를 선택하면 웹폰트를 사용할 수 있게 코드를 제공하는데 첫번째로 보이는 방식이 <link> 입니다.

 

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">

 

이런식으로 사용하라고 친절하게 알려줍니다.

 

이 방식 그대로 사용을 하면 화면이 출력될때 웹폰트 로딩과 상관없이 컨텐츠의 텍스트 그리고 나머지 css 등이 부자연스럽게 서로 다르게 출력되는 그런 현상이 없어집니다.

 

이게 잘 되지 않는 경우는 웹폰트가 로딩 되기 전까지 텍스트가 안나오고 나머지가 일부 나온고 웹폰트가 로딩이 되어야 출력이 되거나 하는 문제로 깜빡이는 듯한 거북한 느낌을 받을 수 있스니다.

 

구글에서 제시하는 것 중 눈에 띄는 것을 살펴보았습니다.

 

rel="preconnect" 이 옵션은 검색을 해보니 

 

현재 페이지에서 외부 도메인의 리소스를 참고하는 것을 브라우저에게 알려 미리 외부 도메인과 연결을 설정할 수 있게 합니다.

preconnect를 사용하면 브라우저가 사이트에 필요한 연결을 미리 예상할 수 있게 됩니다. 브라우저는 필요한 소켓을 미리 설정할 수 있기 때문에 DNS, TCP, TLS 왕복에 필요한 시간을 절약할 수 있게 됩니다.

 

사이트 도메인 내에 업로드된 웹폰트가 아닌경우 이를 브라우저에게 알려줘서 미리 사전작업을 하게 해서 빠르게 연결할 수 있게 할수 있다고 합니다.

 

 

그리고 display=swap 옵션을 검색해 보니

 

텍스트가 항상 보이게 하려면 FOUT와 동일하게 작동하는 swap 옵션을 사용한다. fallback 옵션과 optional 옵션을 사용하면 100ms 동안 텍스트가 보이지 않지만 매우 짧은 시간이어서 이 옵션들도 최적화에 사용할 수 있다.

 

웹폰트가 불러오기 전 까지 폴백 폰트?로 텍스트를 렌더링 한 후 웹폰트가 로딩 된 후 웹폰트로 교체하는 방식인 듯 합니다.

 

장.단점이 있을 수 있긴 해 보이네요. 폰트의 자간 간격이나 높이 등이 차이가 나는 두 폰트간 변화가 느껴질 수도 있겠구요. 

 

이 옵션 방식이 가장 적합한 경우 웹폰트를 영문만 사용하고 한글은 시스템 폰트를 사용한다고 가정을 한다면 페이지가 열리면서 모든 텍스트가 빠르게 출력이 될 것이고 영문 웹폰트가 불러온 후 텍스트의 일부인 영문만 변경이 될 것 입니다.

 

그런데 위와 같은 두가지 옵션으로 영문 폰트만 웹폰트로 사용할때 화면에 출력되는 시점에 웹폰트가 준비되지 않아 뭔가 바뀌는 것을 느끼지 못해 빠르게 웹폰트가 적용이 되는 것을 확인했습니다. 워낙 빠르게 불러와서 그런 것 같네요.

 

그리고 마지막으로 구글에서 알려주지 않은 나머지 하나의 옵션이 있는데 rel="preload" 입니다.

 

현재 페이지에서 사용될 것이 확실한 리소스들을 preload해야 합니다. preload는 브라우저에게 현재 페이지에서 필요한 리소스를 빠르게 가져오게 합니다.

 

그런데 이 옵션 사용시 주의 사항이 하나 있는데 as 속성을 사용하여 리소스의 유형을 브라우저에 알려줘야 합니다. 올바른 유형이 설정되어 있지 않다면 브라우저는 해당 리소스를 사용하지 않습니다

 

<link rel="preload" as="...">

 

 

결과적으로 구글 웹폰트를 빠르게 그리고 자연스럽게 사용을 하기 위해서 html에서 

<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preload stylesheet" as="style" href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap">

 

위와 같이 작성하면 나쁘지 않은 결과를 보여주는 것 같습니다.