star

#Ludens

#social #IT #web #iPad #fashion #psychology #responsive

CDN으로 바로 사용가능한 한글 웹폰트 총정리

2015.10.08 08:30 in Web/Coding

작년 글에서 구글 Early Access에서 제공하는 웹폰트를 살펴보았다면, 이번에는 한글날 기념으로(?) CDN 사이트인 jsDelivr에 올라온 웹폰트를 소개해보려고 합니다.

jsDelivr에 올라와 있는 웹폰트들은 woff와 woff2형식으로만 제공되기 때문에(나눔바른고딕은 제외) 인터넷 익스플로러는 IE9 이상부터 적용됩니다.

구글과 겹치는 폰트와 저작권 문제가 있을것이라고 판단한 몇가지는 제외했습니다.


나눔바른고딕

제가 최근에 가장 많이 사용하는 웹폰트입니다. 전 특히 얇은 버전을 좋아합니다 :)

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

본고딕 (Noto Sans)

구글과 어도비에서 만든 폰트입니다. 漢子도 지원된다고 하네요.

  • normal 250:
  • normal 300:
  • normal 350:
  • normal 400:
  • normal 500:
  • normal 700:
  • normal 900:

코드보기(클릭)

스포카 한 산스

어제 공개된 따끈따끈한 새 폰트입니다. 위의 Noto Sans를 수정해서 만들어진 폰트라네요!

  • normal 300:
  • normal 400:
  • normal 700:

사용방법은 폰트 소개 페이지를 참고해주세요 :)

다음체

다음이 사망(ㅠㅠ)하고 배포페이지도 사라졌네요

  • normal 400:
  • normal 700:

코드보기(클릭)

고도체

고도몰로 유명한 고도소프트에서 배포하는 폰트입니다.

  • normal 400:
  • normal 700:

코드보기(클릭)

한겨레결체

2005년에 한겨레에서 배포한 폰트였죠. 모르는 사람이 많더군요ㅎㅎ

  • normal 400:

코드보기(클릭)

롯데마트 드림체

롯데마트에서 배포하는 폰트 중에 '통큰체'도 있었는데, 저작권 문제로 배포가 중단되었더군요. 여기에는 드림체와 행복체만 가져왔습니다.

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

롯데마트 행복체

이 폰트 처음 써보는데 이쁘군요 +_+

  • normal 400:
  • normal 700:

코드보기(클릭)

정음체

북한과 합작해서 만들었다고 합니다.

  • normal 400:

코드보기(클릭)

대한체

  • normal 400:
  • normal 700:

코드보기(클릭)

부산체

  • normal 400:

코드보기(클릭)

성동고딕체

신기하게 '광역시'나 '도'가 아닌 구청에서 제작한 폰트네요.

  • normal 700:
  • normal 800:

코드보기(클릭)

성동명조체

  • normal 400:
  • normal 700:

코드보기(클릭)

바른바탕체

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

바른돋움체

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

청소년체

한국청소년활동진흥원(길다;;)에서 배포하는 폰트입니다.

  • normal 400:

코드보기(클릭)

덧) 구글에서 제공하는 폰트까지 합치면 총 24가지 한글 웹폰트를 쓸 수 있군요.

신고
tagAdobe, Code, css, Google, jsDelivr, Lotte Mart, Noto Sans, Spoqa, webfont, 가독성, 고도소프트, 고도체, 나눔바른고딕, 다음커뮤니케이션, 대한인쇄문화협회, 대한체, 드림체, 바른돋움체, 바른바탕체, 본고딕, 부산, 부산체, 북한, 성동고딕체, 성동구청, 성동명조체, 신문사, 여성가족부, 정음체, 청소년체, 한겨레, 한겨레결체, 한글날, 행복체
받은 트랙백이 없고 , 댓글이 없습니다.

스킨,폰트 바꿨습니다.

2009.02.20 22:09 in Blog


참 오랜만에(?) 스킨을 바꿨네요.

Windows 7을 설치하고 난 뒤로 바꾸어야 겠다는 생각은 계속 있었는데 말이죠.
어쨌든 이번 컨셉을 윈도우7으로 잡으려다 home.live.com으로 바꾸었습니다[각주:1]

다른 3단스킨을 찾아헤매다가 결국 못찾아서 2단이라도 쓰자고 했으나... 결국 맘에드는 스킨이 없어서 이전에 쓰던 Butterfly스킨을 수정했습니다.
사용자 삽입 이미지
일단 왼쪽 사이드바 옆에있던 메뉴를 다 없애고 본문폭을 550px로 늘렸습니다. 470은 너무 답답해요ㅠㅠ 그리고 메뉴들은 일단 위로 올렸는데 좀 휑한것 같기도 하군요 흠;;;

두번째로 폰트도 바꿨지요.
한겨레결체 이후에 무료폰트를 물색하던 중 순천향체가 눈에 들어왔습니다.
사용자 삽입 이미지
깔끔하고 보기 좋은게 딱이더군요+_+
순천향대학교에서 만들어 여기에서 무료배포를 하고 있습니다.

저번과는 다르게 eot도 적용시켜보았습니다.
@font-face {font-family: "순천향체";src: url("./images/fonts.TTF");}
@font-face {font-family: "순천향체IE";src: url("./images/fonts.eot");}
위처럼 무식하게(?) 폰트페이스를 두개 적용을 했더니 잘 나오더군요.
일단 저는 오페라,크롬,IE7에서 테스트해본 결과 잘 나왔습니다.

나름 윈도우삘을 낸다고 했는데 잘 된건지 모르겠네요.
적용하고 보니 그냥 시원한 느낌의 스킨이 된듯한 느낌이;;;

+추가합니다
일단 사이드바 크기를 좀더 줄였습니다. 그래도 Karion님이 말씀해주신 문제가 해결이 안되네요ㅠㅠㅠ 가로해상도가 1024 이상이면 잘 보이긴 합니다만;;;
위의 메뉴를 '아크몬드'님의 '아크몬드바'로 적용시켰습니다. 원래 용도는 저게 아닌데 말입니다. 아크몬드님껜 죄송(?)하군요;;;

++추가합니다
IE6에서 이상하게 나와서 eot가 있는 구절은 뺐습니다-_-+ 진짜 IE6는 공공의 적인듯...

덧)전 순천향대생이 아니에요;;;
덧2)스킨 깨지는부분이 있으면 말씀해주세요~

  1. 결국 거기서 거기이긴 합니다만;;; [본문으로]
신고
tagBlog, Butterfly, chrome, Internet Explorer, Microsoft, Opera, Skin, windows 7, 글씨체, 순천향체, 한겨레결체
받은 트랙백이 없고 , 댓글20개가 달렸습니다.

블로그 웹폰트 적용기

2008.12.13 20:01 in Blog

이곳의 웹폰트는 MS의 EOT가 아니라 확장자가 TTF인 트루타입글꼴입니다.
그리고 윈도우즈에서만 가능합니다.

오페라10 알파버전, 그리고 파이어폭스 3.1버전에서 웹폰트지원 이야기를 들은 저는 블로그에 웹폰트를 적용시키기로 마음먹었습니다.
일단 여러 무료폰트중에서 네이년이 만들어 배포하는 나눔고딕을 쓰는건 제 취향에는 영 아니라서 한겨레신문에서 배포하는 한겨레결체를 쓰기로 결심했습니다.
사용자 삽입 이미지
먼저 직접올리기에서 폰트파일을 올린뒤에
오페라10 알파를 주력으로 사용하는 저는 그쪽에 설명나온대로 아래와같이
사용자 삽입 이미지
스킨->CSS설정에서 간단하게 한줄을 추가시키고요. 테스트를 위해 제 윈도우에서 한겨레결체를 없앤뒤 들어가보았습니다.
이렇게 오페라10 알파에서는 성공적으로 나왔는데...

불여우에서는 안나오더군요. 아마 정식버전부터 지원되나 봅니다.
저는 된다는 소리만 듣고 베타에서도 적용되는줄 알았지요-_-;;

일단 지금은 오페라10알파 말고는 웹폰트가 적용 가능한 브라우져가 아직 없는것 같군요. 이제 파이어폭스도 정식버전이 나오면 웹폰트적용이 될것이니 IE에서 EOT지원이 아니라 TTF를 지원했으면 하는 바램이 있네요.
신고
tagalpha, Beta, css, eot, firefox, Internet Explorer, Opera, Skin, test, truetype, TTF, Web font, Windows, 글꼴, 지원, 한겨레, 한겨레결체
받은 트랙백이 없고 , 댓글8개가 달렸습니다.

티스토리 툴바