웹폰트를 제작해서 사이트에 적용하기 위해서는

  1. 먼저 라이센스가 있는 폰트(TTF)폰트를 준비합니다.
  2. https://www.web-font-generator.com/ <- 접속해서 TTF 폰트를 업로드합니다.
  3. I’m uploading a font that is legal for web embedding. I checked with the author and/or EULA. <- 항목을 체크합니다.
  4. Generate web font  <- 버튼을 클릭하면 변환된 웹폰트가 다운로드 됩니다.
  5. preview.html 파일로 확인합니다.
  6. 압축된 파일중 styles.css 파일을 열어서 폰트의 url을 수정해줍니다.
  7. src: url(‘폰트이름.eot?#iefix) <– src: url(‘./폰트이름.eot?#iefix) 모든 url 경로를 수정합니다.
  8. 적당한 위치에 모든파일을 업로드합니다.
  9. css 스타일 시트 최상단에 styles.css 를 임포트명령으로 지정합니다.
  10. @import  “/전체 절대경로/styles.css”;
  11. font-family: 에서 웹폰트를 지정합니다.

EOT폰트이외 svg, woff는 브라우저별로 지원하는 웹폰트 형식을 지정합니다.