Introduction

React개발 할때 font를 embed 하기 위해서 Google Font에서 링크 태그를 사용해 폰트를 가져오곤 하는데, 아무래도 구글 서버에서 폰트를 불러오는 방식이 효율적이지 않기 때문에 cache에 저장 되어있지 않은 경우라면 로딩 시간이 오래 걸린다는 단점이 있습니다. 이 단점을 어떻게 해결 할 수 있을까 해서 구글링을 계속 해보고 결론 내린 해결 방법에 대해서 적어보려고 합니다.

Solution

여러 포스트들을 참고했습니다.

• https://sia.codes/posts/making-google-fonts-faster/
• https://requestmetrics.com/web-performance/5-tips-to-make-google-fonts-faster
• https://www.smashingmagazine.com/2019/06/optimizing-google-fonts-performance/

이 포스트들을 참고 하고 나서 내린 결론은 구글 폰트에서 .ttf파일을 다운 받아 그 파일을 로컬 머신에 저장해서 적용 하는 방법입니다. 그 이유는 구글 폰트에서 제공하는 코드들은 이미 위에 포스트들에 있는 최적화 라는 방법들을 이미 적용을 해놓은 상태고, 적용이 안되어있다고 해도 결국에는 웹에서 비효율적으로 로딩해오는 방식이기 때문에 로컬에 저장해두는 방식이 훨씬 빠를것 같다고 결론을 내렸습니다. 아래는 해결 방법입니다.

저는 Google Fonts의 Bungee라는 폰트를 사용했습니다.
1. Google Fonts에서 zip 파일 다운받고 .ttf파일을 리액트 프로젝트 public 폴더에 저장
https://fonts.google.com/specimen/Bungee?query=Bungee
2. index.html파일에 아래의 코드를 입력.

	<style>
      @font-face {
        font-family: Bungee;
        src: url("Bungee-Regular.ttf") format("embedded-opentype"),
          /* Internet Explorer */ url("Bungee-Regular.ttf")
            format("woff2"),
          /* Super Modern Browsers */ url("Bungee-Regular.ttf")
            format("woff"),
          /* Pretty Modern Browsers */ url("Bungee-Regular.ttf")
            format("truetype"),
          /* Safari, Android, iOS */ url("Bungee-Regular.ttf")
            format("svg"); /* Legacy iOS */
      }
    </style>

@font-face css코드를 통해서 font-family의 이름을 지정. ex) Bungee
src의 첫줄에 url()의 parameter로 public 폴더 안에 들어있는 .ttf파일의 파일명을 기입.
src의 그 다음 줄 부터는 다양한 브라우저에서 특정한 font가 문제 없이 적용될 수 있게 해주는 코드임.

3. 이제 리액트 프로젝트에서 해당 폰트 사용 가능 함

temp.jsx

<h2 id='about-title'>About Me</h2>

temp.css...

#about-title {
	color: #84cdee;
	-webkit-text-stroke: 5px #b9e2f5;	
	font-family: 'Bungee', cursive;
    font-size: 7vh;
    margin-top: 6vh;
}

Result

위 사진은 제 포트폴리오 웹사이트 입니다.
https://kyochuljang.com

Conclusion

개발을 하면서 해결하는데 오래 걸린 문제가 있다면 velog에 올리고 다른 분들과 공유할 예정입니다. 피드백은 언제나 환영합니다.