Font

Font

웹 폰트

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

폰트 종류

• EOT(Embedded 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
TTF/OTF	지원	지원	지원	지원	지원
WOFF	지원	지원	지원	지원	지원
WOFF2	지원안됨	지원	지원	지원안됨	지원
SVG	지원안됨	지원	지원안됨	지원	지원
EOT	지원	지원안됨	지원안됨	지원안됨	지원안됨

@font-face

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

나눔 고딕

엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
Web fonts allow Web designers to use fonts that are not installed on the user's computer !@#$%12345

<!-- 나눔고딕 -->
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800');

font-family: 'Nanum Gothic', sans-serif;
</style>

나눔 명조

엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
Web fonts allow Web designers to use fonts that are not installed on the user's computer !@#$%12345

<link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo');

font-family: 'Nanum Myeongjo', serif;
</style>

도현체

엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
Web fonts allow Web designers to use fonts that are not installed on the user's computer !@#$%12345

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

<style>
@import url('https://fonts.googleapis.com/css?family=Do+Hyeon');

font-family: 'Do Hyeon', sans-serif;
</style>

구기체

엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
Web fonts allow Web designers to use fonts that are not installed on the user's computer !@#$%12345

<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css?family=Gugi');

font-family: 'Gugi', cursive;
</style>

Black Han Sans

엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
Web fonts allow Web designers to use fonts that are not installed on the user's computer !@#$%12345

<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans');

font-family: 'Black Han Sans', sans-serif;
</style>

Gamja Flower

엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
Web fonts allow Web designers to use fonts that are not installed on the user's computer !@#$%12345

<link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css?family=Gamja+Flower');

font-family: 'Gamja Flower', cursive;
</style>

cut체

엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
Web fonts allow Web designers to use fonts that are not installed on the user's computer !@#$%12345

<link href="https://fonts.googleapis.com/css?family=Cute+Font" rel="stylesheet">

<style>

@import url('https://fonts.googleapis.com/css?family=Cute+Font');


font-family: 'Cute Font', cursive;
</style>

Sunflower

엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
Web fonts allow Web designers to use fonts that are not installed on the user's computer !@#$%12345

<link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet">

<style>

@import url('https://fonts.googleapis.com/css?family=Sunflower:300');


font-family: 'Sunflower', sans-serif;
</style>

Kirang Haerang

엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
Web fonts allow Web designers to use fonts that are not installed on the user's computer !@#$%12345

<link href="https://fonts.googleapis.com/css?family=Kirang+Haerang" rel="stylesheet">

<style>

@import url('https://fonts.googleapis.com/css?family=Kirang+Haerang');


font-family: 'Kirang Haerang', cursive;
</style>

Poor Story

엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
Web fonts allow Web designers to use fonts that are not installed on the user's computer !@#$%12345

<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">

<style>

@import url('https://fonts.googleapis.com/css?family=Poor+Story');


font-family: 'Poor Story', cursive;
</style>

East Sea Dokdo

엄마는 귀신같이 내가 힘들 때마다 전화를 걸어온다. !@#$%12345
Web fonts allow Web designers to use fonts that are not installed on the user's computer !@#$%12345

<link href="https://fonts.googleapis.com/css?family=East+Sea+Dokdo" rel="stylesheet">

<style>

@import url('https://fonts.googleapis.com/css?family=East+Sea+Dokdo');


font-family: 'East Sea Dokdo', cursive;
</style>