웹폰트 적용 방법과 직접 웹폰트 만들기
최근에는 무료로 제공되는 웹폰트가 많습니다.
하지만 해당 폰트를 홈페이지 제작 시 웹폰트로 사용하고 싶어 검색하여 변환된 웹폰트를 다운로드해 사용하는 경우가 가끔 있습니다.
오늘은 직접 다운로드한 폰트를 웹폰트로 변환해 보았습니다.
웹폰트 적용 방법과 직접웹폰트 만들기 적용방법
이번에 변환한 폰트는 에스코어 드림(S-Core Dream)이라는 폰트로 무료로 제공하는 폰트입니다.
1. 해당 사이트로 이동 후 웹폰트를 다운로드합니다.
http://www.s-core.co.kr/who-we-are/font/
2. 무료로 다운로드하시면 아래와 같이 SCDream1.otf~SCDream9.otf 를 굵기별로 다운로드가 가능합니다.
3. 웹폰트 변환 페이지로 이동합니다.
https://onlinefontconverter.com/
4. 다운로드한 웹폰트를 드래그하거나 하단의 Choose files를 클릭하여 첨부합니다. 첨부 후 왼쪽 하단에 one file selested 표시가 생기면 오른쪽 하단의 Done를 클릭합니다.
5. 폰트가 많은 경우 로딩 시간이 소요될 수 있습니다. 로딩이 완료된 후 SAVE YOUR FONTS 을 클릭합니다.
5. 변환된 파일이 zip 파일로 변환된 것을 확인할 수 있습니다. Download Attachments 를 클릭하시면 해당 폰트를 다운로드하실 수 있습니다.
6. 다운로드 후 압축을 풀면 아래와 같이 각각 폰트가 나누어져 있습니다. 해당 폰트의 압축을 풀게 되면 각 폰트의 font.css와 eot, svg,ttf,woff,woff2 등 다양한 속성의 웹폰트가 생성됩니다.
여기에 생성된 폰트들의 브라우저 호환 등을 고려하여 생성된 웹폰트입니다.
크롬, 파이어폭스, 오페라, 익스플로러 엣지 등 최신 부라우저에서는 woff 폰트만 있어도 깨지는 현상은 없는 것 같습니다.
8. 바로 사용할 수 있도록 직접 HTML과 css, font를 만들어 두었습니다. 다운로드 후 바로 확인이 가능하도록 미리 작성되었습니다.
참고로 변환 방법은 링크 남겨둡니다.
https://blog.naver.com/artbank/222064078620
웹폰트, 웹폰트변환, 에스코어드림, csore, 무료폰트
