본문 바로가기
HTML , CSS

[html] 폰트 적용하기

마이크로웨이뷰 2020. 2. 11. 11:25

안녕하세요. 오늘은 HTML 폰트 적용하는 방법에 대해 알아보도록 하겠습니다.

여기저기 좋은 글들이 많아서 공부 할겸 글을 인용하여 참고도 많이 했습니다.

 

 

 

웹 폰트는 font-family 속성을 사용해서 이름을 정해주고

CSS의 @font-face 지시어를 사용해 웹 브라우저에게 해당 서체를 다운로드 하게 할 수 있습니다.

 

웹 사이트를 만들때 개발자가 font-family 속성을 사용해 서체를 지정하더라도, 다른 PC에선 지정했던 서체가 보이지 않을 수 있습니다. 볼 수 있게 하는 방법은 다른 PC에 해당 폰트가 설치된 상태이거나, 웹 폰트로 지정했을 경우엔 사이트의 방문과 함께 임시로 다운되어 있는 상태여야 볼 수 있습니다.

 

아무쪼록, 한가지는 웹 폰트의 적용방법 그리고 나머지는 서버에 폰트를 업로드하여 적용하는 방법 그리고 나머지

 

1. 로컬, 운영체제에 설치된 폰트를 우선 적용하는 방법

에 앞서서 호환성을 확인해야겠죠? (호환성은 그냥 보기만 해주세요)

format()

url('fontIsRandom.eot') // eot, IE 9 적용 가능
url('fontIsRandom.woff2') // IE 6 ~ 8 최근 브라우저 지원
url('fontIsRandom.ttf') format('truetype') // 안드로이드, 사파리, iOS
url('fontIsRandom.otf') format('opentype') // 최신 브라우저에서 대부분 지원함

url('fontIsRandom.eot?#iefix') format('embedded-opentype') // IE 6 ~ IE 8 지원

 

 * format('embedded-opentype') (간단설명) *
IE9+, 크롬, 사파리, 파폭, 오페라는 eot 글꼴에 대한 format('embedded-opentype') 선언을 사용하지 않아도, 
eot 글꼴은 내려받지 않는 대신 IE6~8은 format('woff')를 해줘도 woff 파일까지 내려받아버리기 때문에
eot를 woff 앞에 작성해야 합니다.

format('truetype')  //  TrueType 폰트
format('opentype')  //  OpenType 폰트
format('woff')  //  woff 폰트
format('woff2')  //  woff2 폰트
format('svg')  //  SVG 폰트

 

EOT(Embedded Open Type) :  IE에서만 통용됩니다. 일반 폰트 파일을 EOT로 변환하려면 특별한 도구가 필요합니다.

 

TrueType과 OpenType : 컴퓨터의 Fonts 폴더를 열어보면 .ttf(TrueType format)와 .otf(OpenType format) 서체 파일들이 보일 것입니다. 대개 컴퓨터 서체 파일로 널리 사용되는 파일 형식입니다. 웹 페이지 뿐만 아니라, 워드 프로세싱이나 전자출판에도 사용할 수 있습니다. 이런 유형의 서체 파일은 대부분의 브라우저가 지원하며 IE9를 포함한 최신 버전의 IE, 크롬, 파이어폭스, 사파리, 오페라, iOS 사파리(4.2+), 그리고 블랙베리 브라우저 등이 여기에 해당합니다.

 

WOFF(Web Open Font Format) : 이 파일은 웹을 주된 대상으로 설계된 파일 형식입니다. WOFF 서체는 기본적으로 TrueType이나 OpenType 서체를 압축한 것이기 때문에 일반적으로 파일 크기가 작아서, 다른 서체보다 신속히 다운로드됩니다. WOFF 파일은 다양한 브라우저 제조사의 지지도 받고 있어서 IE9 를 비롯한 모던 브라우저와 iOS 사파리(5+)에서 지원하고 있습니다. 하지만 안드로이드 진영에서 이 파일을 지원하지 않고 있어서 안드로이드 기기나 IE8 사용자는 서체를 다운받거나 표시할 수 없습니다.

 

SVG(Scalable Vector Graphic) : 이 파일은 사실 서체 파일은 아닙니다. SVG는 사실 벡터 그래픽(확대해도 품질이 유지되는 이미지를 만드는 기술)을 위한 파일입니다. SVG 폰트를 지원하는 브라우저는 매우 제한적으로 IE, FF는 지원하지 않는다. SVG의 또 한가지 문제는 파일 크기가 TrueType의 거의 두 배, WOFF 파일의 거의 세 배에 달한다는 것입니다. SVG를 사용해 얻을 수 있는 진정한 이득은, iOS 사파라 4.1 이전 버전에서 인식하는 유일한 웹 폰트 타입이라는 것입니다.

 


출처: https://webclub.tistory.com/261

 

 

구글 폰트 서비스를 이용한 CDN 링크 방식

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

사용 방법 간단해요

CSS
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');

HTML
body, table, div, p {font-family:'Nanum Gothic';}

 자신의 웹 서버내 폰트가 없는 경우에 구글이 제공하는 폰트 서비스를 이용해서 적용하는 방법

이렇게 불러와 적용을 하게되면 직접 설정을 하지 않아도 간편하다는 장점이 있지만 최대의 단점은 속도가 느리다는 점이 있습니다. 홈페이지를 들어갔는데 폰트가 로딩이 느려서 화면이 반짝반짝 변화가 생기면 보기 안좋겠죠?

이 방법은 포트폴리오를 만들거나 쉽게 간단한 페이지를 만드는 것에 있어서 좋지만

실제 운영하는 서비스 페이지로 만들기엔 권장하지 않습니다. 

 

자신의 서버에서 폰트를 불러오기

폰트 경로는 지정되어 있습니다. 위 방법으로 사용하시려는 분들은

제가 위에서 권장하지 않는다는 말을 보시고 그래 폰트를 PC에 저장해서 내 서버에서 불러오자 이렇게 생각하셨겠죠?

잘 하셨습니다.(구글 폰트 서비스를 이용한 방법이 나쁘다는 건 아닙니다) 우선 사용 방법을 알려드릴게요.  

@font-face{font-family:'Nanum Gothic'; src:url('/fonts/NanumGothic.woff')}
@font-face{font-family:'Nanum Gothic'; src:url('/fonts/NanumGothic.eot')}
 @font-face {
  font-family: fontIsRandom;
  src: {local('fontIsRandom'), 
  		url('/fonts/fontIsRandom.ttf');
  		font-weight :bold; // bold체를 사용하고 싶을 경우
}
  
body {
	font-family : fontIsRandom, 나눔고딕, naumSquare, Apple Gothic;
    // fontIsRandom이 없으면 그 다음 나눔고딕을 찾고 
    // 나눔고딕이 없으면 naumSquare를 찾는 방식
}

local : 로컬에 이미 설치된 폰트를 불러올 때
local(@)로 적으면, local() 값을 처리하지 못하는 특성상 woff 글꼴을 추가로 요청하지 않고 해당 줄을 무시하게 됩니다. 


url : 다운로드할 웹 폰트의 주소를 적을때 font-family 이름과 폰트(NanumGothic) 이름이랑 다르게 설정해도 됩니다.
ex) 폰트는 나눔고딕인데 font-family에는 궁서체

그런데 이렇게 하면 너무나도 헷갈리겠죠? 왠만하면 똑같이 만들어줍니다.

 

이렇게 코드를 적용하면 속도는 조금 향상 되겠지만 그래도 어딘가 불편한 점이 있습니다.

맨 위에서 말했던 호환성 때문인데

 

나는 내 서버에서 폰트를 woff2, eot, ttf, oft 등등 다양하게 설정했습니다.

그런데 브라우저마다 웹폰트를 사용하는 형식이 달라 불필요한 데이터가 생길 수 있습니다.

그렇지만 개선할 수 있는 방법이 있습니다.

 

폰트 적용 개선 방법

@font-face{
	font-family:"Nanum Gothic";
	src:url('/fonts/NanumGothic.eot');
	src:url('/fonts/NanumGothic.eot?#iefix') format('embedded-opentype'),
	url('/fonts/NanumGothic.woff') format('woff'),
	url('/fonts/NanumGothic.ttf') format('truetype');
	url('/fonts/NanumGothic.svg#NanumGothic') format('svg')
	src:local(※), url('/fonts/NanumGothic.woff') format('woff');
    
    // local(@) 아까는 골뱅이 였는데 지금은 특수기호네요??
    // @나 특수기호는 시스템에 존재하지 않을 만한 걸 임의로 적어주어야 작동하기 때문입니다.
}

위 코드는 브라우저마다 필요한 폰트만을 다운받에 해주는 소스입니다.

웹 사이트에서 데이터의 부담을 덜어내는 일은 아주 중요합니다.

 

 

 

요즘 웹 폰트를 잘 사용하지 않는 이유

웹폰트를 사용하지 않는 이유는 두 가지가 있습니다.

첫번째는 IE 브라우저에서 폰트 로드가 완료되면 깜빡거리는 현상인 FOUT 때문이고 두번째는 웹폰트 용량에 따른 성능 문제입니다.
FOUT현상과 함께 IE 외 다른 브라우저(Chrome, Safari 등)에서 나타나는 현상인 FOIT, 스크립트로 임의로 만든 FOFT 현상을 같이 알아보고 FOUT현상을 다른 현상으로 바꾸는 방법을 알아보겠습니다.

 

 

 

Google Webfont Loader

구글에서 제공하는 Google Webfont Loader를 사용하면 위 3가지 현상을 자유롭게 바꿀 수 있습니다.

https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js 
WebFont.load({
  custom: { 
    families: ['NanumSquare'],// @font-face에 선언한 폰트 패밀리명 
    urls: ['../css/NanumSquare.css'], // @font-face가 선언된 css 경로 
  } 
});

위의 스크립트를 적용하면 해당 웹 폰트를 추적하면서 자동으로 html에 아래의 클래스가 적용됩니다.
폰트패밀리는 @font-face에서 선언한 폰트 패밀리명이고 스타일 굵기는 알파벳 n에 @font-face에서 선언한 font-weight의 백의자리 수를 합친 값 입니다

 

- wf-loading: 1개 이상 폰트가 로딩 중

- wf-active: 1개 이상 폰트 사용 가능

- wf-inactive: 모든 폰트 사용 불가능

- wf-폰트패밀리-스타일굵기-loading: 특정 폰트 로딩 중

- wf-폰트패밀리-스타일굵기-active: 특정 폰트 사용 가능

- wf-폰트패밀리-스타일굵기-inactive: 특정 폰트 사용 불가능

 

예를 들어, 나눔스퀘어 Regular와 나눔스퀘어 Bold 웹 폰트를 Google Webfont Loader를 통해 적용했다고 하면 wf-active wf-nanumsquare-n4-active wf-nanumsquare-n7-active 클래스가 html에 추가 될 것 입니다.
위의 클래스를 이용하여 FOUT, FOIT, FOFT 현상을 만들어보겠습니다.

1. FOUT(Flash of Unstyled Text)

FOUT란? 웹 폰트 파일이 로드되기 전 까지 기본서체가 노출되다가 웹 폰트 로드가 완료되면 웹폰트로 바뀌면서 깜빡이는 현상 입니다. FOUC(Flash of Unstyled Content)라고 불리기도 합니다. IE 브라우저에서 발생합니다.

<style> 
  .wf-nanumsquare-n4-active #fonts_loaded { /* 웹 폰트 사용 가능할 때 속성 적용 */
  font-family: NanumSquare, sans-serif; } 
</style>

2. FOIT(Flash of Invisible Text)

FOIT란? 웹 폰트 파일이 로드되기 전 까지 웹 페이지를 로드하지 않고 웹폰트 로드가 완료되면 웹 페이지를 로드하기 때문에 로드가 완료되기 전 까지 텍스트가 안보이는 현상 입니다. IE 브라우저를 제외한 나머지 브라우저(Chrome, Safari 등)에서 발생합니다.

 

<style> 

#fonts-loaded { /* 웹 폰트 다운로드 전에는 화면을 보여주지 않음 */
  display: none; 
} 

.wf-nanumsquare-n4-active #fonts_loaded {/* 웹 폰트 사용이 가능하면 화면을 보여주고 웹 폰트 속성 적용 */
  display: block; font-family: NanumSquare, sans-serif; 
} 

</style>

3. FOFT(Flash of Faux Text)

FOFT란? 웹 폰트 파일에 font-weight, font-style과 관련된 서체가 있을 시 로드 전 브라우저에서 임의로 서체의 굵기와 스타일을 생성하여 노출하고 웹폰트 로드가 완료되면 웹 폰트로 바뀌는 현상입니다. 이는 스크립트로 만들어진 현상으로 시스템글꼴 → 웹 폰트 Regular → 웹 폰트 Bold 순으로 바뀝니다.

 

<style> 

.wf-nanumsquareregular-n4-active #fonts_loaded{ /* 나눔스퀘어 Regular 폰트가 사용 가능할 때 웹 폰트 속성 적용 */
  font-family: NanumSquare-Regular, sans-serif; 
} 
.wf-nanumsquarebold-n4-active #fonts_loaded {/* 나눔스퀘어 Bold 폰트가 사용 가능할 때 웹 폰트 속성 적용 */
  font-family: NanumSquare-Bold, sans-serif; 
} 

</style>


// 스크립트 
WebFont.load({ 
  custom: {
    families: ['NanumSquare-Regular', 'NanumSquare-Bold'],
    urls: ['../css/NanumSquare.css'] 
  }
})

언뜻보면 화면이 두번 깜빡이기 때문에 FOUT보다 안 좋아 보입니다. 그런데 왜 FOFT라는 현상을 스크립트로 만들었을까요? 그 이유는 웹 폰트의 종류가 많을 경우 첫 폰트를 빠르게 보여주기 위해서 입니다.
FOUT와 FOIT는 나눔스퀘어 Regular와 나눔스퀘어 Bold 웹 폰트를 사용할 때 두 웹 폰트를 동시에 다운로드 하게 됩니다. 두 폰트가 동시에 다운로드 되기 때문에 다운로드가 완료되어 웹 폰트 적용 시점은 30초 이후입니다.

 


하지만 FOFT는 나눔스퀘어 Regular와 나눔스퀘어 Bold 웹 폰트를 사용할 때 나눔스퀘어 Regular 먼저 다운로드 하고 나눔스퀘어 Bold를 다운로드 합니다. 그래서 나눔스퀘어가 Regular가 23초 쯤에 다운로드가 완료되어 먼저 적용되고 나눔스퀘어 Bold는 30초 이후에 적용됩니다.

 

성능

실제로 이미지 폰트를 많이 사용하지 않는 경우에는 웹 폰트를 사용하는 것보다 이미지 폰트를 사용하는 것이 좋습니다.

  • 이미지폰트 적용 페이지: 이미지 용량 136KB
  • 웹폰트 적용 페이지: 웹폰트 용량 273KB

웹 폰트를 적용했을 때 137KB정도 용량이 더 크지만, 웹 폰트, 이미지 폰트 모두 사이트에 한 번 접속하면 캐시에 저장되고 이후에 접속할 때 마다 캐시에서 불러와 사용합니다. 그러므로  이미지폰트를 여러 페이지에 사용할 경우 이미지 폰트보다 웹 폰트를 사용하는 것이 효율적입니다.
예를 들어 아래 동선과 같이 여러 페이지를 이동한다고 가정했을 때를 비교해보겠습니다.
뮤직홈 → 이용권 구매 → 알뜰 이용권 자세히 보기
웹 폰트 적용환경 사용자A는 뮤직홈에 처음 접속했을 때 웹폰트가 다운받아지고 캐시에 저장됩니다. 이 후 이용권 구매, 알뜰 이용권 자세히 보기 페이지에서는 캐시에 저장된 웹폰트를 불러 사용합니다.
이미지 폰트 적용환경 사용자B는 뮤직홈, 이용권 구매, 알뜰 이용권 자세히 보기 에서 이미지파일 136KB를 받기 때문에 총 408KB를 다운받게 됩니다.
이미지 폰트도 캐시를 이용하지만 각 페이지에서 사용한 이미지가 모두 다른 파일이기 때문입니다.(모두 같은 이미지 파일에 저장하게되면 이미지 용량이 너무 커지게 됩니다.)

 

출처 : https://wit.nts-corp.com/2017/02/13/4258

 

실제 적용 연습하기

CSS

@font-face{
  font-family:'NanumGothic'; 
  src:url('fonts/NanumGothicRegular.eot'); 
  src:url('fonts/NanumGothicRegular.eot?#iefix') format(‘embedded-opentype’),
  url('fonts/NanumGothicRegular.woff') format(‘woff’),
  url('fonts/NanumGothicRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face{ font-family:'NanumGothic'; 
  src:url('fonts/NanumGothicBold.eot'); 
  src:url('fonts/NanumGothicBold.eot?#iefix') format(‘embedded-opentype’),
  url('fonts/NanumGothicBold.woff') format(‘woff’),
  url('fonts/NanumGothicBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal; 
} 

@font-face{ 
  font-family:'NanumGothic'; 
  src:url('fonts/NanumGothicItalic.eot'); 
  src:url('fonts/NanumGothicItalic.eot?#iefix') format(‘embedded-opentype’),
  url('fonts/NanumGothicItalic.woff') format(‘woff’),
  url('fonts/NanumGothicItalic.ttf') format('truetype');
  font-weight: normal; 
  font-style: italic;
}

HTML

body {
	font-family {"NaumGothic", italic } // 이렇게 지정하면 나눔고딕 이탤릭체 사용
    font-family {"NaumGothic", bold } // 이렇게 지정하면 나눔고딕 bold체 사용
}


/*=====================================================================================*/

그런데 IE8 이하에서는 설정하는 방법이 비슷하지만 각각 다르죠

CSS

@font-face{ 
  font-family:'NanumGothicRegular';
  src:url('fonts/NanumGothicRegular.eot'); 
  src:url('fonts/NanumGothicRegular.eot?#iefix') format(‘embedded-opentype’),
  url('fonts/NanumGothicRegular.woff') format(‘woff’),
  url('fonts/NanumGothicRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
 }
 
 @font-face{ 
  font-family:'NanumGothicBold';
  src:url('fonts/NanumGothicBold.eot'); 
  src:url('fonts/NanumGothicBold.eot?#iefix') format(‘embedded-opentype’),
  url('fonts/NanumGothicBold.woff') format(‘woff’),
  url('fonts/NanumGothicBold.ttf') format('truetype');
 }
 
  @font-face{ 
  font-family:'NanumGothicItalic';
  src:url('fonts/NanumGothicItalic.eot'); 
  src:url('fonts/NanumGothicItalic.eot?#iefix') format(‘embedded-opentype’),
  url('fonts/NanumGothicItalic.woff') format(‘woff’),
  url('fonts/NanumGothicItalic.ttf') format('truetype');
 }
 
 HTML
 
 p { font-family: NanumGothicRegular; font-style: normal; font-weight: normal; }
 em { font-family: NanumGothicItalic; font-style: normal; font-weight: normal; }
 strong { font-family: NanumGothicBold; font-style: normal; font-weight: normal; }

 

저작자표시

티스토리툴바