WebFont

웹 폰트

로컬 컴퓨터에 폰트 설치 여부와 상관없이 온라인 특정 서버에 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다.


폰트 종류

  • EOT (Embeded Open Tye) : 익스플러6~8에서 사용하는 웹 폰트 방식입니다.
  • TTF (True Type Fonts) : 애플과 마이크로소프트에 의해 1980년대 후반에 개발된 글꼴 표준입니다.
  • OTF (Open Type Fonts) : 마이크로소프트 컴퓨터 기본 글꼴
  • WOFF (The Web Open Font Format) : W3C에서 추천하는 글꼴 형식입니다.
  • WOFF2 (The Web Open Font Format) : WOFF에서 향상된 글꼴 형식입니다.
  • SVG : 백터 방식의 글꼴 형식입니다.

폰트 호환성

IE CHROME FOREFOX SAPARI OPERA WHALE
TTF/OTF O O O O O O
WOFF O O O O O O
WOFF2 X O O X O O
SVG X O X O O O
EOT O X X X X X

@font-face

@font-face {
    font-family : 폰트 종류;
    font-style : 폰트 스타일;
    font-weight : 폰트 두께;
    src : 폰트 경로;                
}                
@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    src: local('NanumGothic'), url(https://fonts.gstatic.com/s/nanumgothic/v13/PN_3Rfi-oW3hYwmKDpxS7F_z-7r_xFtIsPV5MbNOyrVj67GNc972x-dpix2LdhN-iTB6aWWhDX3G.0.woff2) format('woff2');
    unicode-range: U+f9ca-fa0b, U+ff03-ff05, U+ff07, U+ff0a-ff0b, U+ff0d-ff19, U+ff1b, U+ff1d, U+ff20-ff5b, U+ff5d, U+ffe0-ffe3, U+ffe5-ffe6;
}

나눔 고딕

  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
  • Mom calls me whenever I'm in trouble like a ghost. #$12
  • Mom calls me whenever I'm in trouble like a ghost. #$12
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800" rel="stylesheet">Font-family: 'Nanum Gothic';

나눔 명조

  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
  • Mom calls me whenever I'm in trouble like a ghost. #$12
  • Mom calls me whenever I'm in trouble like a ghost. #$12
<link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800" rel="stylesheet">Font-family: 'Nanum Gothic';

주아체

  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
<link href="https://fonts.googleapis.com/css?family=Nanum+Jua:400" rel="stylesheet">Font-family: 'Nanum Jua';

도현체

  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
<link href="https://fonts.googleapis.com/css?family=Nanum+Do Hyeon:400" rel="stylesheet">Font-family: 'Nanum Do Hyeon';

잘난체

  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
@font-face { font-family: 'yg-jalnan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight: normal; font-style: normal; }

116앵무부리

  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
@font-face { font-family: '116angmuburi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.0/116angmuburi.woff') format('woff'); font-weight: normal; font-style: normal; }

기량해랑체

  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
@font-face { font-family: 'BMKIRANGHAERANG'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMKIRANGHAERANG.woff') format('woff'); font-weight: normal; font-style: normal; }

제주고딕

  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
@import url(//fonts.googleapis.com/earlyaccess/jejugothic.css); .jejugothic * { font-family: 'Jeju Gothic', sans-serif; }

산돌국대떡볶이체

  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
@font-face { font-family: 'SDKukdetopokki'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SDKukdetopokki.woff') format('woff'); font-weight: normal; font-style: normal; }

신비는일곱살

  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
@font-face { font-family: 'SangSangShinb7'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.1/SangSangShinb7.woff') format('woff'); font-weight: normal; font-style: normal; }

꽃길

  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
@font-face { font-family: 'SangSangFlowerRoad'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/SangSangFlowerRoad.woff') format('woff'); font-weight: normal; font-style: normal; }

빙그레체11

  • 뚱바하나 주세요. 뚱뚱한 바나나맛 우유요!
  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
@font-face { font-family: 'Binggrae-Bold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae-Bold.woff') format('woff'); font-weight: normal; font-style: normal; }

어비 찌찌빠체

  • 그 아이는 항상 묵찌빠를 하면 첫번째는 묵이었다.힁힁
  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
@font-face { font-family: 'UhBeeJJIBBABBA'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeeJJIBBABBA.woff') format('woff'); font-weight: normal; font-style: normal; }

어비 링링체

  • 링딩동 링딩동 링디기딤디기딩딩딩 링딩동림딩동
  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
@font-face { font-family: 'UhBeeRingRing'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeeRingRing.woff') format('woff'); font-weight: normal; font-style: normal; }

  • 오밀조밀한 글씨를 야금야그미 씁니다잉
  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
@font-face { font-family: 'UhbeeNaHyun'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhbeeNaHyun.woff') format('woff'); font-weight: normal; font-style: normal; }

116수박 화체

  • 열음엔 사이다로 달달한 수박화체를 만들어 묵장
  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. #@!23
  • Mom calls me whenever I'm in trouble like a ghost. #$12
@font-face { font-family: '116watermelon'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.0/116watermelon.woff') format('woff'); font-weight: normal; font-style: normal; }