[TIL- 2022.09.24] 웹폰트 최적화

1. 폰트 최적화 

next js에서 웹폰트를 최적화 하는 방법을 찾고 적용 시키고자 자료를 검색하는 시간을 가졌다. 

 

https://nextjs.org/learn/seo/improve/fonts

Learn | Next.js

nextjs에서는 사실 기본적으로 font 최적화하는 방법을 제공해주고 있었다. _document 파일 안에 nextjs가 example에서 보여주는 대로 코드를 넣어주면된다. 

 

외에도 찾아보면서 이것저것 공부할 수 있었다. 

 

다이나믹 서브셋

 

아래는 다이나믹 서브셋이라는 것인데, 

다이나믹 서브셋은 하나의 글꼴안에 모든 글자를 한번에 가져오는 것이 아니라, 사용할 때만 해당 글자를 가져오는 방식으로 폰트 파일 크기를 최적화한 방법이다. 

https://velog.io/@twain/Google-Fonts%EC%B2%98%EB%9F%BC-%EB%8B%A4%EC%9D%B4%EB%82%98%EB%AF%B9-%EC%84%9C%EB%B8%8C%EC%85%8B-%ED%8F%B0%ED%8A%B8-%EB%A7%8C%EB%93%A4%EC%96%B4-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

Google Fonts처럼 다이나믹 서브셋 폰트 만들어 사용하기

내가 사용하는 폰트인 pretandard에서는 다이나믹 서브셋을 옵션으로 제공해주고 있어서, 그것을 사용하기로 했다. 

 

 

web.dev 

역시 web.dev. 예전에 읽을 때는 눈에 안들어왔지만, 이번에는 내가 직접 적용하려고 하니 그나마 좀 눈에 들어왔다. 

https://web.dev/font-best-practices/

Best practices for fonts

 

 

2.nextjs 헤더바 active 페이지에서 스타일 바꿔주기 

 

https://tech.toktokhan.dev/2021/06/28/active-link/

Next.js active link 스타일링

이 사람의 것을 참고해서 만들었다.