[폰트] TTF → WOFF로 변환하기

⚠ 저작권 주의

공식사이트 라이선스를 보면서 웹폰트 변환이 가능한지 꼭 확인하자. TTF 파일을 구매했더라도 웹폰트 사용까지 허용한 것은 아니기 때문에 웹폰트로 무작정 변환해서 사용하면 절대 안된다. 

 

TTF 파일은 용량이 크기 때문에 변환해서 사용하는 것을 권장한다.

---

웹폰트(WOFF, WOFF2, OTF)로 변환하기

사이트 접속 : https://convertio.co/kr/ttf-woff/

혹시 사이트가 사라져도 구글에 [ ttf to woff ] 라고 검색하면 비슷한 사이트들이 우수수 나온다.

TTF WOFF 변환 (온라인 무료) — Convertio

웹폰트 코드 작성

/* suit */
@font-face {
  font-family: "SUIT";
  font-weight: 100;
  src: url("./SUIT-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "SUIT";
  font-weight: 200;
  src: url("./SUIT-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "SUIT";
  font-weight: 300;
  src: url("./SUIT-Light.woff2") format("woff2");
}
@font-face {
  font-family: "SUIT";
  font-weight: 400;
  src: url("./SUIT-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "SUIT";
  font-weight: 500;
  src: url("./SUIT-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "SUIT";
  font-weight: 600;
  src: url("./SUIT-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "SUIT";
  font-weight: 700;
  src: url("./SUIT-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "SUIT";
  font-weight: 800;
  src: url("./SUIT-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "SUIT";
  font-weight: 900;
  src: url("./SUIT-Heavy.woff2") format("woff2");
}