목차
- font-family 정의
- font-family 구문
- font-family 속성값 종류
- font-family 속성값1 - 폰트 가족 (font-family)
- [참고] 운영체제 내장 폰트 주요 종류
- [참고] 해외 웹디자이너 선호 무료 폰트 BEST 10
- font-family 속성값2 - 속성 가족 (generic-family)
- 구글웹폰트 주소
- 구글웹폰트 방법1 - <link> 태그 이용
- 구글웹폰트 방법2 - @import url() 함수 이용
- 구글웹폰트 - 한글폰트종류
- 구글웹폰트 - 유명사이트 폰트
- Apple SD Gothic Neo 저작권 관련글 보기
- 구글웹폰트 - 홈짱추천폰트 (Poiret One) : 보석쇼핑몰에 적합
- 구글웹폰트 - 우분투 (Ubuntu), 라토(Lato) 웹폰트 사용
- 폰트 사용 시 주의사항 (저작권 / 웹폰트 특정 문자 구현 에러)
- 추천 무료 폰트
- font-family 관련 주소
- 다운받은 woff 형식 폰트 적용 ★★
- Youtube Sans 폰트 적용
font-family 정의
폰트 종류 (= 글씨체) 선언.
1.
보통 한번에 여러 개 지정해서 브라우저나 OS가 지원하는 순서대로 출력.
2.
(영어, 일본어, 한국어) 순으로 폰트 나열해야 한번에 여러 언어 반영 됨.
(예) font-family: helvetica, meiryo, gulim;
이 경우, 반드시 <meta> 태그에 charset="UTF-8" 언어셋 지정 필요.
HTML4.01 : <meta http-equiv = "content-type"content = "text / html; charset = UTF-8">
HTML5 : <meta charset = "UTF-8">
3.
폰트를 여러 개 나열할 때는 , (쉼표) 이용.
4.
- 기본값 : 브라우저마다 다름.
- 상속여부 : O
- 애니효과 : X
- CSS버전 : CSS1
- JS 구문 : object.style.fontFamily="Verdana,sans-serif"
5.
모든 주요브라우저 지원.
font-family 구문
font-family 속성값 종류
1. 폰트 가족 (font-family)
2. 속성 가족 (generic-family)
3. inherit (상속) : 부모요소 폰트속성값 상속
속성값 작성 주의사항 ★
1.
폰트 이름 또는 폰트 종류 명칭이 띄어 쓰기 된 경우엔 ' ' (작음 따옴표)나 " " (큰 따옴표)로 묶음.
(예) {font-faimily:'Times New Roman';} 또는 {font-family:"Times New Roman";}
(예) <p style="font-family:'Times New Roman';">
3.
폰트 이름이나 폰트 종류는 사용자의 브라우저나 OS 지원 여부에 따라 다르게 보일 수 있으므로,
폰트 가족 (font-family)과 속성 가족 (generic-family)을 둘다 함께 사용하시는 게 좋음.
가장 좋은 건, 어떠한 환경에서도 동일하게 보여질 수 있는 웹폰트를 사용하는 것임.
4.
한글로 "돋움" "굴림"식으로 속성값 넣을 경우,
익스플로러에서 글자 크기가 아주 조그맣게 보일 수 있음.
반드시, 영어로 "dotum" "gulim"식으로 쓰시기 바람.
font-family 속성값1 - 폰트 가족 (font-family)
돋움, 돋움체, 굴림, 굴림체, 고딕, 궁서, 궁서체, times, courier, arial 등 아주 다양
1.
굴림・ 굴림체 구분 (※ 돋움・돋움체도 마찬가지)
굴림너비가 글자 크기 만큼만 차지
굴림체너비가 글자 크기 상관없이 모두 동일.
2.
한글 폰트명은 빈 공간 없어도 따옴표로 묶는 게 좋음.
3.
한글 폰트명과 함께 영문 폰트명도 함께 써주는 게 좋음.
4.
영문 폰트 경우 다른 영문 전용 폰트 우선 적용하려면,
영문 폰트 전용 폰트를 앞쪽에 우선 배치.
(예: font-family: Arial, "돋움", dotum, sans-serif;)
※
serif삐침 있는 글자
(ex)
Times New Roman , Georgia
sans-serif삐침 없는 글자 (sans : 無 의미, serif : 삐침 의미)
(ex)
Arial , Verdana
Monospace :
동일한 너비 글자
(ex) Courier New , Lucida Console
(예)
<style>
.돋움 {font-family: "돋움";}
.dotum {font-family: "dotum";}
.돋움체 {font-family: "돋움체";}
.dotumche {font-family: "dotumche";}
.굴림 {font-family: "굴림";}
.gulim {font-family: "gulim";}
.굴림체 {font-family: "굴림체";}
.gulimche {font-family: "gulimche";}
.고딕 {font-family: "고딕";}
.고딕체 {font-family: "고딕체";}
.궁서 {font-family: "궁서";}
.궁서체 {font-family: "궁서체";}
.times {font-family: times;}
.courier {font-family: courier;}
.arial {font-family: arial;}
</style>
<h1 class="돋움">돋움 - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="dotum">Dotum - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="돋움체">돋움체 - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="dotumche">dotumche - 홈짱닷컴 (homzzang.com)</h1>
<br>
<h1 class="굴림">굴림 - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="gulim">gulim - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="굴림체">굴림체 - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="gulimche">gulimche - 홈짱닷컴 (homzzang.com)</h1>
<br>
<h1 class="고딕">고딕 - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="고딕체">고딕체 - 홈짱닷컴 (homzzang.com)</h1>
<br>
<h1 class="궁서">궁서 - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="궁서체">궁서체 - 홈짱닷컴 (homzzang.com)</h1>
<br>
<h1 class="times">times - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="courier">courier - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="arial">arial - 홈짱닷컴 (homzzang.com)</h1>
결과보기
[참고] 운영체제 내장 폰트 주요 종류
'Arial', 'Vernada', 'Times New Roman', 'Georgia', 'Tahoma' 등
[참고] 해외 웹디자이너 선호 무료 폰트 BEST 10
Myriad Pro (링크)
League Gothic (링크)
Cabin (링크)
Corbel (링크)
Museo Slab (링크)
Bebas Neue (링크) ※ 일시적 사이트 공사 중
Ubuntu (링크)
Lobster (링크)
Franchise (링크)
PT Serif (링크)
참고 http://jiransoft-design.tistory.com/48
font-family 속성값2 - 속성 가족 (generic-family)
serif
삐침 있는 서체
sans-serif
삐침 없고 굵기가 일정한 서체
cursive
손으로 쓴 것 같은 서체
fantasy
화려한 서체
monospace
글자 폭과 간격이 일정한 서체
<style>
.serif {font-family: serif;}
.sans-serif {font-family: sans-serif;}
.cursive {font-family: cursive;}
.fantasy {font-family: fantasy;}
.monospace {font-family: monospace;}
</style>
<h1 class="serif">serif - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="sans-serif">sans-serif - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="cursive">cursive - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="fantasy">fantasy - 홈짱닷컴 (homzzang.com)</h1>
<h1 class="monospace">monospace - 홈짱닷컴 (homzzang.com)</h1>
※ 구글웹폰트
구글웹폰트 주소
※ 폰트적용코드 확인 : 우측상단 SELECT THIS FONT 버튼 클릭.
※ 한글 폰트 찾는법 : Ctrl + F 누른 후, Korean 입력
※ 구글웹폰트 사용방법은 2가지 존재.
구글웹폰트 방법1 - <link> 태그 이용
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style type="text/css">
#hz {font-family: 'Lobster', cursive }
</style>
<div id="hz">
<h1>Poiret One 구글 웹폰트</h1>
<h1>홈짱닷컴 Homzzang.com</h1>
</div>
결과 보기
※ 주의: Lobster 첫 글자는 반드시 대문자로 적어야 함.
구글웹폰트 방법2 - @import url() 함수 이용
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Tamma|Lobster');
※ 내부스타일 경우, <style> 태그 안에 파란색코드만 추가.
※ 외부스타일 경우, style.css 파일 상단에 파란색코드만 추가
<style type="text/css">
* {font-size:30px;}
</style>
<p class='hanna'> hanna 홈짱닷컴 (homzzang.com)</p>
<p class='nanumbrushscript'> nanumbrushscript 홈짱닷컴 (homzzang.com)</p>
<p class='nanumgothic'> nanumgothic 홈짱닷컴 (homzzang.com)</p>
<p class='nanumgothiccoding'> nanumgothiccoding 홈짱닷컴 (homzzang.com)</p>
<p class='nanummyeongjo'> nanummyeongjo 홈짱닷컴 (homzzang.com)</p>
<p class='nanumpenscript'> nanumpenscript 홈짱닷컴 (homzzang.com)</p>
<p class='notosanskr'> notosanskr 홈짱닷컴 (homzzang.com)</p>결과 보기
※ 위 소스를 웹폰트주소와 웹폰트선언 부분으로 나눠 표기해도 됨.
<style type="text/css">
* {font-size:30px;}
.hanna {font-family: 'Hanna', serif;}
.nanumbrushscript {font-family: 'Nanum Brush Script', cursive;}
.nanumgothic {font-family: 'Nanum Gothic', sans-serif; }
.nanumgothiccoding {font-family: 'Nanum Gothic Coding', monospace;}
.nanummyeongjo {font-family: 'Nanum Myeongjo', serif;}
.nanumpenscript {font-family: 'Nanum Pen Script', cursive;}
</style>
<p class='hanna'> hanna 홈짱닷컴 (homzzang.com)</p>
<p class='nanumbrushscript'> nanumbrushscript 홈짱닷컴 (homzzang.com)</p>
<p class='nanumgothic'> nanumgothic 홈짱닷컴 (homzzang.com)</p>
<p class='nanumgothiccoding'> nanumgothiccoding 홈짱닷컴 (homzzang.com)</p>
<p class='nanummyeongjo'> nanummyeongjo 홈짱닷컴 (homzzang.com)</p>
<p class='nanumpenscript'> nanumpenscript 홈짱닷컴 (homzzang.com)</p>
참고 https://fonts.google.com/earlyaccess
구글웹폰트 - 한글폰트종류
/* 한나 */
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
font-family: 'Hanna', serif;
/* 나눔손글씨붓 (= 나눔브러쉬스크립트) */
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
font-family: 'Nanum Brush Script', cursive;
/* 나눔고딕 */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
font-family: 'Nanum Gothic', sans-serif;
/* 나눔고딕코딩 */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
font-family: 'Nanum Gothic Coding', monospace;
/* 나눔명조 */
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
font-family: 'Nanum Myeongjo', serif;
/* 나눔손글씨펜 (= 나눔펜스크립트) */
@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
font-family: 'Nanum Pen Script', cursive;
/* 본고딕 (Noto Sans Kr) */
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
font-family: 'Noto Sans KR', sans-serif;
/* Advent Pro */
@import url(https://fonts.googleapis.com/css?family=Advent+Pro:100,300,600);
font-family: 'Advent Pro', sans-serif;
구글웹폰트 - 유명사이트 폰트
유튜브
font-family: Roboto, Arial, sans-serif;
구글 애드센스
font-family: "Google Sans",Roboto,Arial,sans-serif;
네이버 메뉴
font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;
어딘지 기억이.. ㅡㅡ;
font-family: "Noto Sans KR", Helvetica,"Apple SD Gothic Neo", Sans-serif;
아미나 메뉴
font-family: "Roboto", sans-serif;
구글 애드센스 메뉴
font-family: "Google Sans",Roboto,Arial,sans-serif;
KBS뉴스
font-family: NotoSans-Regular, "Noto Sans Regular", "Apple SD Gothic Neo", "애플 SD 산돌고딕 Neo", "Helvetica Neue", Roboto, sans-serif;
MBC뉴스
font-family: "Noto Sans CJK KR","Helvetica Neue","Apple SD Gothic Neo",sans-serif;
길호넷
font-family: 'Open Sans', sans-serif;
Apple SD Gothic Neo 저작권 관련글 보기
1. 폰트 저작권은 산돌 측이 아니라, Apple 측 소유.
2. Apple은 기본 번들 폰트에 대한 상업적 제한 안 함.
따라서, font-family 속성값으로 지정해도 문제 없음.
최근, 구글 검색결과 페이지도 아래 속성값으로 변경됨.
font-family: 'Apple SD Gothic Neo',arial,sans-serif;
https://sir.kr/cm_free/1526152
구글웹폰트 - 홈짱추천폰트 (Poiret One) : 보석쇼핑몰에 적합
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<style type="text/css">
#hz {font-family: 'Poiret One', cursive; }
</style>
<div id="hz">
<h1>Poiret One 구글 웹폰트</h1>
<h1>홈짱닷컴 Homzzang.com</h1>
</div>
결과보기
구글웹폰트 - 우분투 (Ubuntu), 라토(Lato) 웹폰트 사용
<style>
@import url('https://fonts.googleapis.com/css?family=Lato|Ubuntu&display=swap');
.ubuntu { font-family: 'Ubuntu', sans-serif; font-size:40px; }
.lato { font-family: 'Lato', sans-serif; font-size:40px; }
</style>
<div class="ubuntu">ubuntu - 홈짱닷컴 Homzzang.com</div>
<div class="lato">lato - 홈짱닷컴 Homzzang.com</div>
결과보기
왕계란 님 (191224) https://sir.kr/qa/337082
폰트 사용 시 주의사항 (저작권 / 웹폰트 특정 문자 구현 에러)
1.
폰트 저작권 단속 심하니 사용 시 각별히 주의 !!
단, 구글 웹폰트는 막 사용하셔도 상관 없음. ^^
2.
웹폰트 사용 시 특정 문자가 안 나올 땐, 다른 폰트로 교체 권장 !!
관련글: (230527) https://sir.kr/qa/500238
구글 폰트 https://fonts.google.com/
폰트저작권 https://homzzang.com/b/free-1118
추천 무료 폰트
Spoqa Han Sans
https://spoqa.github.io/spoqa-han-sans/ko-KR/
굉장히 깔끔
Maven Pro
https://fonts.google.com/specimen/Maven+Pro
깔끔한 영문 폰트
NanumSquareRound
https://noonnu.cc/font_page/38
깔끔한 한글 폰트 (적용예)
font-family 관련 주소
구글 폰트 (한글 + 영문) ★
카페24 무료 폰트
문체부 무료 폰트
Apple SD Gothic Neo 저작권
눈누 ★
다폰트
헬조선연구소
로스트타입
마이폰츠
중국어
일본어
한글 폰트: 대부분 영문 지원.
영문 폰트: 한글 미지원 그 결과, 보통 굴림체 자동 적용됨.
폰트 위치: C:\Windows\Fonts
다운받은 woff 형식 폰트 적용 ★★
https://homzzang.com/b/css-157
Youtube Sans 폰트 적용
1. 페이지 상단에 추가
<link href="https://fonts.cdnfonts.com/css/youtube-sans" rel="stylesheet">
또는,
<style>
@import url('https://fonts.cdnfonts.com/css/youtube-sans');
</style>
2. 적용할 요소의 스타일 정의에 추가.
- font-family: 'YouTube Sans', sans-serif;
- font-family: 'YouTube Sans Dark', sans-serif;
PS. 폰트 다운받아 직접 웹에 올려서 적용할 분은 아래 링크 가셔서 다운.