[ Angular ] font 사용하기

Angular/Angular

[ Angular ] font 사용하기

shiro21 2022. 6. 21. 14:00

구글 폰트 import 하기

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500&family=Shadows+Into+Light&display=swap');

h1 {
    font-family: 'Shadows Into Light', cursive;
}

[ scss 기준 ]

styles.scss부분에 import를 추가해줍니다.
font를 적용시키고자 하는 부분에 font-family를 추가해줍니다.

@Font Face

@font-face란 사용자가 갖고 있지 않은 폰트도 특정 경로로 연결시켜주어 다운 받아 사용할 수 있도록 정의해 주는 것을 말합니다.

@font-face 사용하기

@font-face {
    font-family: 'Nanum';
    src: url('./assets/fonts/nanum.eot');
    src: url('./assets/fonts/nanum.eot?#iefix') format('embedded-opentype'),
    url('./assets/fonts/nanum.woff2') format('woff2'),
    url('./assets/fonts/nanum.woff') format('woff'),
    url('./assets/fonts/nanum.otf') format('opentype'),
    url('./assets/fonts/nanum.ttf') format('truetype'),
    url('./assets/fonts/nanum.svg') format('svg');
}

  h1 {
    font-family: 'Nanum', sans-serif;
  }

font-family로 이름을 지정해줍니다.
내려받은 파일 위치를 지정해줍니다. ( or 구글폰트처럼 주소를 입력해줍니다. )
이름을 지정한 font-family를 불러와줍니다.

src 경로 순서

src값에 기술된 폰트 설치 경로들은 위부터 아래로 기술된 순서대로 사용자의 브라우저에 부합하는 포맷의 폰트를 다운 받게 됩니다.

순서대로 다운 받는 중, 사용자의 브라우저에서 지원되는 폰트포맷을 받게되면 이후는 받지 않게됩니다.

그렇기 때문에 woff같은 최신 포맷을 사용하지 못하는 8이하의 IE 브라우저를 위한 다운 경로를 최상단에 위치하게 됩니다.

낮은 버전의 IE의 경우 eot포맷을 제외한 불필요한 포맷들을 거치지 않게하고, 다으은 최신 브라우저들을 위해 경량화된 woff2부터 다운받게 하는 것입니다.

?#iefix

순서대로 사용자의 브라우저에 맞는 포맷의 폰트파일을 탐색하여 다운 받을때 IE8 이하에서 일어나는 버그를 위한 코드입니다.

글꼴 형식에 대하여

트루타입 글꼴(TTF)

TrueType은 1980년대 후반 Apple과 Microsoft에서 개발한 글꼴 표준입니다. TrueType은 Mac OS 및 Microsoft Windows 운영 체제 모두에서 가장 일반적인 글꼴 형식입니다.

오픈타입 글꼴(OTF)

OpenType은 확장 가능한 컴퓨터 글꼴 형식입니다. TrueType을 기반으로 제작되었으며 Microsoft의 등록 상표입니다. OpenType 글꼴은 오늘날 주요 컴퓨터 플랫폼에서 일반적으로 사용됩니다.

웹 오픈 글꼴 형식(WOFF)

WOFF는 웹 페이지에서 사용하기 위한 글꼴 형식입니다. 2009년에 개발되었으며 현재 W3C 권장 사항입니다. WOFF는 기본적으로 압축 및 추가 메타데이터가 있는 OpenType 또는 TrueType입니다. 목표는 대역폭 제약이 있는 네트워크를 통해 서버에서 클라이언트로 글꼴 배포를 지원하는 것입니다.

웹 오픈 글꼴 형식(WOFF 2.0)

WOFF 1.0보다 더 나은 압축을 제공하는 TrueType/OpenType 글꼴입니다.

SVG 글꼴/모양

SVG 글꼴을 사용하면 텍스트를 표시할 때 SVG를 글리프로 사용할 수 있습니다. SVG 1.1 사양은 SVG 문서 내에서 글꼴 생성을 허용하는 글꼴 모듈을 정의합니다. SVG 문서에 CSS를 적용할 수도 있고 SVG 문서의 텍스트에 @font-face 규칙을 적용할 수도 있습니다.

임베디드 OpenType 글꼴(EOT)

EOT 글꼴은 웹 페이지에 포함된 글꼴로 사용하기 위해 Microsoft에서 설계한 OpenType 글꼴의 압축된 형태입니다.

포맷과 종류별 특징

포맷	특징
TrueType Fonts ( TTF )	- 가장 일반적인 글꼴 형식 - 대부분의 브라우저가 지원함
OpenType Fonts ( OTF )	- TTF를 기반으로 제작된 글꼴 형식 - TTF와 비슷하지만, TTF에서 지원하지 않는 최신 기능을 사용 가능함
The Web Open Font Format ( WOFF )	- OTF와 TTF로 이루어져 있는 압축된 글꼴 형식 - 압축되어 있기 때문에 가볍고 다운 받는 속도가 빠름 - W3C 권장 사항
The Web Open Font Format ( WOFF 2.0 )	- WOFF보다 향상된 압축을 제공하는 글꼴 형식
SVG Fonts / Shapes ( SVG )	- Vector 기반의 그래픽을 사용하는 SVG로 만들어진 글꼴 형식
Embedded OpenType Fonts ( EOT )	- IE에서 동작하는 글꼴 형식

저작자표시 비영리 변경금지 (새창열림)