[HTML] 구글 웹폰트 적용하기 - preconnect, preload 속성

✨구글 웹폰트 적용하기

일반적으로 웹 폰트를 적용할 때에는 

index.html 페이지에서 <link> 태그를 이용하여 연결하는 방법을 사용한다.(또는 <styles> 스타일 시트에서 @import)

구글 웹 폰트에서 친절하게 사용방법을 알려준다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@700&display=swap" rel="stylesheet">

 

1. <link rel=""> 속성

<link> 태그의 rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계를 명시한다. 

rel은 link태그의 필수 속성이므로 반드시 명시하여야 한다.

자세한 속성 값들은 여기에서 자세히 확인 할 수 있다.

 

2. preconnect, preloasd

평소 개인적으로 프로젝트를 진행할 때는

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@700&display=swap" rel="stylesheet">

이 부분만 연결하여 사용하기도 했었는데, 문득 다음과 같은 "preconnect" 속성 값들이 사용되는 이유에 대해 궁금해졌다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

 

• preconnect : 브라우저가 대상 리소스의 원본에 미리 연결하도록 명시함.

현재 페이지에서 외부 도메인의 리소스를 참고하는 것을 브라우저에게 알려 미리 외부 도메인과 연결을 설정할 수 있게 합니다.
preconnect를 사용하면 브라우저가 사이트에 필요한 연결을 미리 예상할 수 있게 됩니다. 브라우저는 필요한 소켓을 미리 설정할 수 있기 때문에 DNS, TCP, TLS 왕복에 필요한 시간을 절약할 수 있게 됩니다.

 

이 preconnect 속성 값을 사용하지 않았을 때, 웹폰트가 로딩 되기 전까지 텍스트가 안나오고 나머지가 일부 나온고 웹폰트가 로딩이 되어야 출력이 되거나 하는 문제로 깜빡이는 듯한 느낌을 받을 수 있었다고 한다.

preconnect 속성을 사용하면, 현재 페이지에서 href="주소" 로 참고한 외부 도메인과 연결하는 것을 미리 예상하게 하기 때문에 사전작업을 하게 해서 빠르게 연결할 수 있게 한다.

웹폰트 사용시 웹폰트가 로딩될때 까지 약간의 문제나 사소하게 발생하는 부분을 보완가능하게 하는 기능인 것 같다.

 

 

<참고>

코딩교육 티씨피스쿨

웹폰트 link display=swap, rel="preconnect"옵션이 맘에 듭니다. - 자유게시판 - 라이믹스 꿀팁