웹폰트 로드하기

noonnu.cc에서 로드해보자!

MemE으로 블로그 테마를 바꾸던 중 웹폰트를 찾아야 했다. 당연하지만 한국어 블로그에 라틴 문자만 있는 글꼴을 적용할 수는 없었다. MemE는 무려 설정 파일에서 웹폰트를 바꿀 수 있게 해준다. 하지만 구글 폰트 밖에 지원하지 않는다. 그리고 구글 폰트의 한글 글꼴 중에는 내 마음에 드는 글꼴이 없었다. 다른 방법을 찾아야 했다.

아마 한글 웹폰트가 잘 정리되어 있는 곳은 눈누가 아닐까 싶다. 꽤 많은 양의 상업적으로 이용 가능한 한글 글꼴이 소개되어 있다. 나는 그 중에 리디 바탕을 골랐다.

눈누의 리디 바탕 페이지

글꼴 소개 페이지 우측에 CSS 코드가 있다. 이걸 스타일시트에 복사-붙여넣기 해주자. 하지만 이렇게 CSS로만 로드하는 방식은 처음 웹페이지에 접속할 때 웹폰트를 느리게 로딩되게 한다. 웹페이지의 <head> 부분에 다음 HTML 소스를 넣어주자.

1
<link rel="preload" href="https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff" as="font" crossorigin="anonymous">

href 다음 링크는 눈누의 CSS 안의 링크를 넣어주면 된다. 위 코드는 웹사이트에 접속할 때 웹폰트 로드를 우선으로 해준다.

댓글을 불러올까요?