웹폰트 + 구글 웹 폰트 사용법 ( font-family )

# 웹폰트

폰트를 서버에 올려놓고 사용자가 컴퓨터에 설치되어 있지 않은 폰트를 서버에서 내려받아

사용할 수 있는 방법.

웹페이지의 폰트를 온라인폰트로 적용하므로서 컴퓨터에 설치된 폰트만을 사용해야 했던

제약이 없어짐.

# 폰트 파일 종류

TTF - 윈도우에 설치하는 폰트 파일( 우리가 흔히 폰트 다운받으면 이 파일을 받게됨. 더블클릭으로 윈도우에 설치 )

하지만 브라우저 별로 지원하는 폰트파일이 다르므로 변환이 필요

EOT - IE만지원. IE8이하버전은 eot파일만 인식함

OTF/TTF - 크롬, 파이어폭스, 오페라, 사파리, 안드로이드, ios에서 인식

쉽게 복제가능해서 WOFF형식이 만들어짐

WOFF - OTF/TTF를 이용한 압축버전으로 빠르게 로드됨.

SVG/SVGZ - 파일크기를 가볍게 하여 모바일사용에 용이. 파이어폭스, IE에서는 지원 하지 않음.

즉, 브라우저 및 버전에 따라 지원하는 폰트파일종류가 다르므로 사이트안에 여러 폰트파일을 등록해놓는다.

( 변환하는 사이트 : https://www.fontsquirrel.com/tools/webfont-generator )

그러니깐 인터넷에 올려져 있는 웹폰트는 대부분 TTF파일이다.

더블클릭으로 내 윈도우에 설치가 된다.

이 파일을 이용하여 여러 브라우저에 사용 가능하게 위 변환 사이트에서 바꾸면 된다.

# 네이버 나눔고딕

무료폰트중에 상업용으로도 사용 가능하며 디자인도 좋은 네이버 "나눔고딕" 글꼴을 사용해 보자.

나눔고딕은 기본적으로 윈도우용 폰트를 제공함

다운로드는 네이버에서 "나눔고딕" 검색.

ttf파일은 윈도우용폰트임( 네이버 나눔고딕을 다운받으면 C:\Windows\Fonts 위치에 나눔고딕.ttf 파일로 저장된다. 해당 폰트를 드래그 하여 바탕화면으로 옴기면 파일이 생김 )

해당 파일을 더블클릭하면 내 컴퓨터에 "나눔고딕" 폰트가 설치가 된다.

이 폰트를 내 사이트에 적용하려면

따라서 윈도우용폰트인 ttf파일을 웹폰트인 woff, eot로 변환하여야 한다.

( ttf-> woff, eot변환필요 )( 변환법은 밑에서.. )

# 웹폰트 사용하기( font-face )

HTML코드 속에 삽입하여 웹폰트를 구현

문법

@font-face {
  font-family: "폰트명";
  src: local("폰트명1"), 
       local("폰트명2"), 
       url("폰트명3.woff") format("폰트포맷");
  [font-weight: 폰트굵기];
  [font-style: 폰트style값];
}

@font-face {
  font-family: "Nanum Gothic";
  src: local("NanumGothic-Regular"),
  src: url('/fonts/NanumBarunGothic.eot') format('embedded-opentype'),
       url('/fonts/NanumBarunGothic.woff') format('woff'),
       url('/fonts/NanumBarunGothic.ttf') format('truetype'),
       url('/fonts/NanumBarunGothic.svg#NanumGothic') format('svg'),
       url('/fonts/NanumBarunGothic.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}

-----------------------

body{ 
    font-family : "Nanum Gothic", "serif"; 
}

* font-family은 사용할 폰트의 이름을 선언하는곳.

폰트명은 하나만 넣는다.( 여기 폰트명이 아래 src 폰트명과 일치해야하는것은 아니다 )

유지보수를 위해 가독성 있는 폰트명으로 선언해 주자.

* src은 폰트파일경로를 적어주는곳.

fonts폴더가 있다고 가정하고, 파일들을 여기 집어 넣고 CSS적용하면됨

local은 사용자 컴퓨터에 이미 설치된 폰트를 폰트명으로 찾는것이고

url은 local에 없다면 웹폰트를 서버에서 다운받는다.

( 사실 local() 속성은 사용자 로컬 폰트가 이상할 경우 화면에 노출되지 않을 수 있기때문에

잘 사용하지 않는다. )

그리고 콤마를 사용하여 여러번 중첩 가능하다.( 브라우저에서 적용할 수 있는 폰트를 찾을때까지

콤마 순서대로 이동함 )

따라서 사용자가 이미 해당 폰트를 자신의 컴퓨터에 보유중이라면 굳이 웹폰트를 다시

받을 필요가 없어져서 로딩 속도가 빠른다

* 폰트는

* foramt은 폰트파일형식을 선택( woff, truetype, opentype, svg, embeded opentype 중 선택 )

( woff - .woff )( truetype - .ttf )( opentype - .ttf, .otf )( embeded opentype - .eot )

( svg - .svg, .svgz )

* 웹폰트는 http통신을 통해 서버에서 내려받는 기능이므로 웹페이지 로딩 속도가 느려질 수 있음

꼭 사용해야한다면 font-weight나 font-style을 최대한 적게 사용하고 파일 크기를 줄이는게 좋음

* url에 인용부호( " " 또는 ' ' ) 를 넣지 않을 경우 인식 못하는 브라우저도 있음

# font-family

폰트를 설정하는 속성( 기본값은 웹브라우저의 기본글꼴 )

font-face 없이 이것만 설정한다면 방문자의 사용자 컴퓨터에 해당 글꼴이 있어야하고

만약 없다면 기본글꼴로 보이게됨

즉, 사용자가 해당 글꼴이 없다면 기본 글꼴을 사용하기때문에 로딩속도는 빠르지만

font-family의 의미가 없어짐

문법

font-family : font | initial | inherit

font : font-name또는 generic-family( 필수 )

initial : 기본값으로 설정( 옵션 )

inherit : 부모 요소의 속성값을 상속받음( 옵션 )

font-name : 글꼴 이름. 띄어쓰기가 있으면 따옴표로 감싸야함

여러개 입력시 있는 순서대로 적용됨

generic-family : 대표 글꼴 유형

설정한 글꼴이 사용자 시스템에 하나도 없을경우 사용됨

* serif : 삐침 있는 명조계열의 글꼴
* sans-serif : 삐침 없고 굵기가 일정한 고딕계열의 글꼴( 키워드이므로 따옴표 필요없음 )
* monospace : 글자 폭과 간격이 일정한 글꼴
* cursive : 손으로 쓴 것 같은 필기계열의 글꼴
* fantasy : 화려한 글꼴

( https://developer.mozilla.org/ko/docs/Web/CSS/font-family 에서 확인 가능 )

< serif >

< sans-serif >

< monospace >

< cursive >

< fantasy >

# 팁

순서대로 적용하기때문에 한글이 없는 글꼴을 앞에 두고, 한글 글꼴을 뒤에 두면

한글과 영어가 서로 다른 글꼴로 표현됨

그리고 마지막은 generic-family로 표현하는게 좋음(모든 글꼴이 없을경우 기본글꼴 설정)

font-family: Georgia, 'Nanum Gothic' , sans-serif;

예제

font-family : 'Nanum Gothic',  serif;

font-family : 'Nanum Gothic', 'Gill Sans', sans-serif;

font-family : sans-serif;

# 티스토리 글꼴변경하기

블로그에 글을 쓸때 기본 글꼴을 사용하는것 보다 자신이 마음에 드는 글꼴을 사용 하는것이

시각적인 부분에서 중요하다.

글꼴은 많은 사람들이 네이버의 '나눔고딕' 글꼴을 선호한다.

무료이고 시각적으로도 매우 좋은 글꼴이라서 많은 사람들이 사용한다.

블로그 글꼴은 3가지 방법이 있다.

세번째가 가장 편리하지만 장단점이 다 있다.

첫번째, CSS편집에서 font-family를 등록하는방법

( 사용자 컴퓨터에 해당 글꼴이 있어야함. 로딩속도 빠름 )

두번째, 티스토리에 사용할 글꼴파일을 업로드하는 방법

세번째, 구글 웹폰트를 이용하는 방법

( 페이지마다 글꼴을 항상 로딩하기때문에 조금 느림 )

여기서는 가장 많이 사용하는 네이버의 '나눔고딕' 글꼴을 사용하는 방법으로 예시를 들어본다.

먼저 첫번째와 두번째 방식을 합쳐서 알아보자.

1. 네이버에서 "나눔고딕" 을 검색한다.

2. 목차에서 나눔글꼴을 선택한다.

3. 아래와 같이 나눔고딕을 선택한다.

4. 다운받는다( TTF 윈도우용)

5. 다운 받은 폰트를 더블클릭하여 설치한다. ( 폰트명.ttf 파일 )

6. 제어판에서 글꼴을 검색한뒤 나눔글꼴을 찾는다.

선택후 드래그 하여 바탕화면에 옴긴다.

( 종류별로 TTF파일이 바탕화면에 생긴다 )

7. 다운 받은 폰트를 내 티스토리 올리기 위해 관리에서 "스킨편집"을 누른다.

9. HTML편집 누름

10. 파일업로드에서 추가 버튼을 눌러 폰트를 추가한다.( 적용버튼 눌러야함 )

( 참고로 한글은 안되므로 영문으로 바꾼다. )

11. 추가후 CSS를 눌러 다음을 추가해 주면 된다. 위치는 최상위에 두면 된다.

@font-face {
  font-family: "NanumGothic";
  src: local("NanumGothic"),
  src: url('/images/NanumGothic.eot') format('embedded-opentype'),
  font-style: normal;
  font-weight: 400;
}


-----------------------


body{ 
    font-family : "NanumGothic", "serif"; 
}

만약 아래와 같이 기존 CSS에 font-family가 존재한다면 주석 ( /* */ ) 으로 양쪽을 감싸고

위와 같이 새로 입력해주면된다.

추가후 적용을 눌러 폰트가 변경된걸 확인하자!

다음으로 세번째, 구글 웹폰트를 이용하는 방법을 알아보자.

이 방식은 티스토리 파일에 업로드하는것이 아니고 구글에서 자체적으로 제공하는 웹폰트를 이용하는 것이다.

구글은 네이버의 "나눔고딕"을 제공하기 때문에 다음과 같이 추가해 주면 된다.

( 장점은 티스토리에 파일을 추가 하지 않으므로 폰트파일로 인해 용량을 차지 하지는 않지만

구글 웹폰트에서 사이트 방문시 다운로드 하기때문에 로딩 시간에 지연이 있긴 하다. )

1.구글 웹폰트 사이트인 https://fonts.google.com/specimen/Nanum+Gothic 방문한다.

아래와 같이 1번 "SELECT THIS FONT"를 클릭하면 2번이 생기는데 2번을 클릭한다.

2. 그러면 아래와 같은 화면이 뜬다.

아래 두 가지 방식으로 웹 폰트를 사용 할 수 있는데

HTML의 구조를 안다면 어느곳에 복사 붙혀넣을지 알 것이다.

첫번째 캡쳐는 html과 css부분에 각각 붙혀넣어야하고

두번째꺼는 css부분에만 넣으면된다.

간단히 두번째 캡쳐를 사용해보자.

이것은 CSS에 모두 때려 넣을수 있기때문에 가독성이 높다.

적용 누르면 완료가 된다.

이제 이와 같은 방법으로 다른 웹폰트도 마음껏 사용하자

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

태그요약 (0)	2019.03.03

Dev

웹폰트 + 구글 웹 폰트 사용법 ( font-family )

'HTML' 카테고리의 다른 글

티스토리툴바

웹폰트 + 구글 웹 폰트 사용법 ( font-family )

'HTML' 카테고리의 다른 글

'HTML' Related Articles

티스토리툴바