• 회원가입
  • 로그인
  • 구글아이디로 로그인

[font] CSS - font-family 속성 ★ - 글자종류 (= font-family속성 = 폰트패밀리속성 = 글씨체종류 = 폰트종류 = 글씨종류 = 글자종류 = 서체종류 = 글꼴종류) + 구글웹폰트 (상속 O)

목차

  1. font-family 정의
  2. font-family 구문
  3. font-family 속성값 종류
  4. font-family 속성값1 - 폰트 가족 (font-family) 
  5. [참고] 운영체제 내장 폰트 주요 종류
  6. [참고] 해외 웹디자이너 선호 무료 폰트 BEST 10
  7. font-family 속성값2 - 속성 가족 (generic-family)
  8. 구글웹폰트 주소
  9. 구글웹폰트 방법1 - <link> 태그 이용
  10. 구글웹폰트 방법2 - @import url() 함수 이용
  11. 구글웹폰트 - 한글폰트종류
  12. 구글웹폰트 - 유명사이트 폰트
  13. Apple SD Gothic Neo 저작권 관련글 보기
  14. 구글웹폰트 - 홈짱추천폰트 (Poiret One) : 보석쇼핑몰에 적합
  15. 구글웹폰트 - 우분투 (Ubuntu), 라토(Lato) 웹폰트 사용
  16. 폰트 사용 시 주의사항 (저작권 / 웹폰트 특정 문자 구현 에러)
  17. 추천 무료 폰트
  18. font-family 관련 주소
  19. 다운받은 woff 형식 폰트 적용 ★★
  20. 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: 속성값;
 
 

font-family 속성값 종류

 
1. 폰트 가족 (font-family)
2. 속성 가족 (generic-family)
3. inherit (상속) : 부모요소 폰트속성값 상속 

 


속성값 작성 주의사항 ★

 

1. 
폰트 이름 또는 폰트 종류 명칭이 띄어 쓰기 된 경우엔 ' ' (작음 따옴표)나 " " (큰 따옴표)로 묶음.
(예) {font-faimily:'Times New Roman';} 또는 {font-family:"Times New Roman";} 
 
2. 
인라인 CSS 방식 경우엔 ' ' (작은 따옴표)로 묶음.
(예) <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>
 

 

 

※ 구글웹폰트

 

구글웹폰트 주소

 
https://fonts.google.com/earlyaccess (영어, 한글 6종류)

※ 폰트적용코드 확인 : 우측상단 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> 태그 안에 파란색코드만 추가.
외부스타일 경우, style.css 파일 상단에 파란색코드만 추가

 


 

<style type="text/css">
* {font-size:30px;}
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
.hanna {font-family: 'Hanna', serif;}
 
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
.nanumbrushscript {font-family: 'Nanum Brush Script', cursive;}
 
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
.nanumgothic {font-family: 'Nanum Gothic', sans-serif; }
 
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
.nanumgothiccoding {font-family: 'Nanum Gothic Coding', monospace;}

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
.nanummyeongjo {font-family: 'Nanum Myeongjo', serif;}

@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
.nanumpenscript {font-family: 'Nanum Pen Script', cursive;} 

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
.notosanskr {font-family: 'Noto Sans KR', sans-serif;}
</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;}
.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 저작권 
 
눈누 ★
https://noonnu.cc/ (한글서체)
 
 
다폰트
 
헬조선연구소
 
로스트타입
 
마이폰츠
https://myfonts.com (일부 무료, 일부 유료)

 



중국어
 
일본어

 



한글 폰트: 대부분 영문 지원.
영문 폰트: 한글 미지원 그 결과, 보통 굴림체 자동 적용됨.
폰트 위치: 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. 폰트 다운받아 직접 웹에 올려서 적용할 분은 아래 링크 가셔서 다운.


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
font CSS - font 속성 ★ - 글자스타일종합 (= font속성 = 글씨체 = 서체 = 글꼴 = 폰트속성, …
font CSS - font-size 속성 ★ - 글자크기 (= 글씨체크기= 글씨크기 = 서체크기= 글씨크기 = …
font CSS - font-family 속성 ★ - 글자종류 (= font-family속성 = 폰트패밀리속성 = 글…
font CSS - font-weight 속성 ★ - 글자굵기 (= font-weight속성 = 폰트굵기 = 글씨체굵…
font CSS - font-style 속성 - 글자기울기 (= 이텔릭체 여부 = 이탤릭 글씨체 = 글자 기울려쓰기 … 1
font CSS - font-variant 속성 - 작은 대문자 (= font-variant속성 = 폰트베리언트 = …
font CSS - @font-face 구문 - 다운받은 웹폰트적용 (= @font-face쿼리 = 다운글꼴적용 = …
font CSS - font-feature-settings 속성 - OpenType 글꼴의 고급 인쇄 기능 제어 (=…
font CSS - font-kerning 속성 - 문자 모양 고려해, 문자 사이 간격 지정 (= font-kerni…
font CSS - font-size-adjust 속성 - 소문자 x 높이 기준으로, 대체 글꼴 크기 재조정 (= f…
font CSS - font-stretch 속성 - 폰트 너비 조정 (= font-stretch속성 = 폰트스트레치속…
font CSS - font-variant-caps 속성 -
목록
찾아주셔서 감사합니다. Since 2012