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