![[2021/12/29]국비지원 CSS3 9-(6) 웹폰트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FTaR75%2Fbtrr4xZaDq1%2FKB5ZSk90rWPWC8NWmCD2Uk%2Fimg.gif)
- 배포 기준
- 유료
- 무료 ( 상업적 사용 가능 여부 및 저작권 확인 중요 )
- 확장자
- otf
- ttf
- woff
- 기타
- woff2 : Chromium 베이스에서만 지원 ( Chrome, 불여우, 오페라 )
eot : 현재는 故pro가 되신 IE의 버전 8 이하에서 지원- iconfont ( 유료, 무료 혼재 ) - 담임강사는 이 거 쓰는 법 안 가르쳐줌 ( 독학 )
- 소환 위치
- 시스템 : windows, Mac, Linux 등 Local에 설치되어 내가 볼 때만 소환
- 웹서버 : 내 컴퓨터엔 없지만 웹을 통해서 소환 가능
웹서버를 통해 소환한 폰트 = 웹폰트
- html에서 바로 불러오기 : link href = "웹 상의 경로"
- 설치된 폰트를 불러오기 : @font-face { font-family : 파일명, 또는 임의; src : url( 설치 경로 ); }
- css로 불러오기 : @import url( 웹 상의 경로 )
추천되는 방식 : link href or @import url()
@font-face 는 서버에서 폰트가 차지하는 용량이 커질 가능성이 높음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@font-face 웹폰트</title>
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Licorice&family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Pushster&display=swap" rel="stylesheet">
<style type="text/css">
@font-face {
font-family: roboto;
src: url(font/Roboto-Regular.ttf);
}
@font-face {
font-family: kawaiifoodfont;
src: url(font/KawaiiFoodFont.ttf);
}
@font-face {
font-family: merrychristmas;
src: url(font/MerryChristmasStar.ttf);
}
@font-face {
font-family: establishRoomNo703;
src: url(font/Room\ No.703.ttf);
}
/* 구글폰트, 구글폰트 earlyaccess,
영문, 일문 다폰트(라이센스, 유료 확인 = 라이센스 무시하면 잣됨)
한글폰트 눈누*/
/* 저장사용 : @font-face = 꼭 웹클라우드에 동봉해야됨, 바로 불러오기 : link */
.txt1{font-family: roboto;}
.txt1_1{font-family:establishRoomNo703}
@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
.txt2{font-family: 'Licorice', cursive;}
.txt3{font-family: kawaiifoodfont;font-size: 30px;}
.txt4{font-family: 'Nanum Gothic', sans-serif;}
.txt4_1{font-family: 'Noto Sans KR', sans-serif;}
.txt5{font-family: 'Jeju Hallasan', cursive;}
.txt5_1{font-family: 'Cute Font', cursive;}
.txt6{font-family: 'Pushster', cursive;}
.txt7{font-family: merrychristmas;}
</style>
</head>
<body>
<div class="normal_text">ABCDE</div>
<div class="txt1">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div class="txt1_1">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div class="txt2">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div class="txt3">abcdefghijklmnopqrstuvwxyz</div>
<div class="txt3_1">abcdefghijklmnopqrstuvwxyz</div>
<div class="txt4">나눔고딕이 적용 됩니다.</div>
<div class="txt4_1">노토산스 적용 됩니다.</div>
<div class="txt5">나눔고딕 아닙니다. 제주 한라산입니다.</div>
<div class="txt5_1">우리말 좋은말 사용해요.</div>
<div class="txt6">Merry Christmas</div>
<div class="txt7">Merry Christmas</div>
</body>
</html>
결과물
