구글 폰트 없이, 서버에 파일 업로드 없이 폰트 설정하는법

정답은 base64 사용하기

폰트파일을 직접 서버에 올릴 수도 없고 구글폰트에서도 지원되지 않는 폰트를 사용해야할 때 사용할 수 있는 방법입니다.

1. 우선 사용하고자 하는 폰트 파일을 다운받아줍니다.
2. 해당 파일을 base64 변환기능을 제공하는 사이트에서 변환합니다.
3. 해당 base64코드를 css에서 아래와 같이 설정하여 사용해줍니다.

출처: https://www.giftofspeed.com/base64-encoder/

// 출처: https://www.giftofspeed.com/base64-encoder/

// OPENTYPE FONTS: 
@font-face{font-family:'yourfontname'; src: url(data:font/opentype;charset=utf-8;base64,YOUR BASE64 STRING HERE);}

// WOFF FONTS: 
@font-face{font-family:'yourfontname'; src: url(data:application/font-woff;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(woff);}

// WOFF FONTS: 
@font-face{font-family:'yourfontname'; src: url(data:application/font-woff2;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(woff2);}

// TTF FONTS: 
@font-face{font-family:'yourfontname'; src: url(data:application/font-ttf;charset=utf-8;base64,YOUR BASE64 STRING HERE) format('truetype');}

코드 샌드박스 예시입니다.