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	SAFARI	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	O	X	O	O
EOT	O	X	X	X	X	X

@font-face

@font-face{
    font-familt : 폰트 종류;
    font-style : 폰트 스타일;
    font-weight : 폰트 두께;
    src : 폰트 경로;
}

               /* [0] */
@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;

나눔 고딕

고생 끝에 골병 난다. !@#$%1234567
고생 끝에 골병 난다. !@#$%1234567
고생 끝에 골병 난다. !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

<href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800" rel="stylesheet"  >
font-family: 'Nanum Gothic';

나눔 명조

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

<link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800" rel="stylesheet" >
font-family: 'Nanum Myeongjo';

주아체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

<link href="https://fonts.googleapis.com/css?family=Jua" rel="stylesheet" >
font-family: 'Jua';

도현체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

<link href="https://fonts.googleapis.com/css?family=Do+Hyeon" rel="stylesheet" >
font-family: 'Do+Hyeon';

잘난체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%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 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@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; }

겨울눈꽃체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@font-face { font-family: 'HSGyoulnoonkot'; 
               src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/HSGyoulnoonkot.woff') format('woff'); 
               font-weight: normal; 
               font-style: normal; }

말사미815

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@font-face { font-family: 'Malssami815'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.0/Malssami815.woff') format('woff'); 
               font-weight: normal; 
               font-style: normal; }

안경잡이체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@font-face { font-family: 'FOUREYES'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/FOUREYES.woff') format('woff'); 
               font-weight: normal; 
               font-style: normal; }

우비베이비

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@font-face { font-family: 'UhBeebaby'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeebaby.woff') format('woff'); 
               font-weight: normal; 
               font-style: normal; }

어비 챠밍체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@font-face { font-family: 'UhBeecharming'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeecharming.woff') format('woff'); 
               font-weight: normal; 
               font-style: normal; }

복조리체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@font-face { font-family: 'HealthsetLuckybagStd'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.0/HealthsetLuckybagStd.woff') format('woff'); 
               font-weight: normal; 
               font-style: normal; }

함초롬체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@font-face { font-family: 'HCRDotum'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.0/HCRDotum.woff') format('woff'); font-weight: normal; font-style: normal; }

어비 찌빠빠체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@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; }

어비 은경체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@font-face { font-family: 'UhBeeEUNKYUNG'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeeEUNKYUNG.woff') format('woff'); font-weight: normal; font-style: normal; }

어비 세현체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@font-face { font-family: 'UhBeeSe_hyun'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeeSe_hyun.woff') format('woff'); font-weight: normal; font-style: normal; }

어비 찌풍딩체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@font-face { font-family: 'UhBeeJjipungding'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeeJjipungding.woff') format('woff'); font-weight: normal; font-style: normal; }

수박화체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@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; }

호국체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@font-face { font-family: 'HogookBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.0/HogookBold.woff') format('woff'); font-weight: normal; font-style: normal; }

몬소리체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%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; }

빙그레체

고생 끝에 골병 난다. !@#$%1234567 !@#$%1234567
A migraine inevitably follows pain. !@#$%1234567

@font-face { font-family: 'Binggrae'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae.woff') format('woff'); font-weight: normal; font-style: normal; }

Professional web publishers

webstoryboy.co.kr

WebFont

웹 폰트

폰트 종류

폰트 호환성

@font-face

나눔 고딕

나눔 명조

주아체

도현체

잘난체

상상체

겨울눈꽃체

말사미815

안경잡이체

우비베이비

어비 챠밍체

복조리체

함초롬체

어비 찌빠빠체

어비 은경체

어비 세현체

어비 찌풍딩체

수박화체

호국체

몬소리체

빙그레체

Webstoryboy