웹통 | 무료콘텐츠Zone
홈 > 무료콘텐츠 > Free Contents

무료콘텐츠는 관리자 심사승인 후 등록되며 등록 확정시 PSD, AI파일은 550포인트 사진은 110포인트가 부여 됩니다.(업무일 기준 오후 5시30분 1회 심사) 

※ 콘텐츠 등록 시 원본 ZIP파일 1부 / 썸네일 JPG파일 1부를 등록하셔야 심사승인이 가능합니다. 

웹폰트 적용 방법과 직접 웹폰트 만들기

상단 붉은색바를 클릭하시면 해당 사이트로 이동합니다.

최근에는 무료로 제공되는 웹폰트가 많습니다.

하지만 해당 폰트를 홈페이지 제작 시 웹폰트로 사용하고 싶어 검색하여 변환된 웹폰트를 다운로드해 사용하는 경우가 가끔 있습니다.

오늘은 직접 다운로드한 폰트를 웹폰트로 변환해 보았습니다.

 

 

2aa4f211164a9f168f714e5a92f83175_1597764435_3756.png

 

 

웹폰트 적용 방법과 직접웹폰트 만들기 적용방법

이번에 변환한 폰트는 에스코어 드림(S-Core Dream)이라는 폰트로 무료로 제공하는 폰트입니다.

1. 해당 사이트로 이동 후 웹폰트를 다운로드합니다.

http://www.s-core.co.kr/who-we-are/font/ 

2aa4f211164a9f168f714e5a92f83175_1597764469_1071.png 

 

2. 무료로 다운로드하시면 아래와 같이 SCDream1.otf~SCDream9.otf 를 굵기별로 다운로드가 가능합니다.

2aa4f211164a9f168f714e5a92f83175_1597764502_2039.png 

 

 


3. 웹폰트 변환 페이지로 이동합니다.

https://onlinefontconverter.com/ 

2aa4f211164a9f168f714e5a92f83175_1597764558_1421.png

 

 



 

 

 

4. 다운로드한 웹폰트를 드래그하거나 하단의 Choose files를 클릭하여 첨부합니다. 첨부 후 왼쪽 하단에 one file selested 표시가 생기면 오른쪽 하단의 Done를 클릭합니다. 

 

 

2aa4f211164a9f168f714e5a92f83175_1597764579_3323.png

 

 

5. 폰트가 많은 경우 로딩 시간이 소요될 수 있습니다. 로딩이 완료된 후 SAVE YOUR FONTS 을 클릭합니다. 

2aa4f211164a9f168f714e5a92f83175_1597764598_7778.png

 

5. 변환된 파일이 zip 파일로 변환된 것을 확인할 수 있습니다. Download Attachments 를 클릭하시면 해당 폰트를 다운로드하실 수 있습니다.

 

 

2aa4f211164a9f168f714e5a92f83175_1597764622_9825.png

 

 

6. 다운로드 후 압축을 풀면 아래와 같이 각각 폰트가 나누어져 있습니다. 해당 폰트의 압축을 풀게 되면 각 폰트의 font.css와 eot, svg,ttf,woff,woff2 등 다양한 속성의 웹폰트가 생성됩니다.

여기에 생성된 폰트들의 브라우저 호환 등을 고려하여 생성된 웹폰트입니다.

크롬, 파이어폭스, 오페라, 익스플로러 엣지 등 최신 부라우저에서는 woff 폰트만 있어도 깨지는 현상은 없는 것 같습니다.


 

2aa4f211164a9f168f714e5a92f83175_1597764644_1801.png

 

 

8. 바로 사용할 수 있도록 직접 HTML과 css, font를 만들어 두었습니다. 다운로드 후 바로 확인이 가능하도록 미리 작성되었습니다.

참고로 변환 방법은 링크 남겨둡니다.

https://blog.naver.com/artbank/222064078620




 

, , , ,

0 Comments