WebFont

웹 폰트

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


폰트 종류

  • EOT(Embeded Open Type) : 익스플로러 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 FIREFOX 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-9LZxnth-408O7Jj27F-wPe3MZqbqr0_pkqRT1MrmhorMmKgHQajZNaiaA.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;
}                
                

나눔 고딕

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

나눔 명조

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

주아체

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

도현체

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

잘난체

  • 엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%1234567
  • Mom calls me whenever I'm in trouble like a ghost. !@#$%1234567
@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;
}

서울한강체

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

몬소리체

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