Css 폰트 적용 방법과 종류

Css

Css 폰트 적용 방법과 종류

Urime 2023. 12. 12. 14:06

📘 폰트의 종류

1. TTF (Ture Type Font )

- 가장 일반적인 글꼴 형식, 대부분의 부라우저가 지원.

2. OTF (Open Type Font)

- TTF 기반으로 제작된 글꼴 형식
- 오픈 타입으로 로컬에 직접 적용하는 방법
- 폰트 크기가 크면 로딩 시간이 오래 걸린다.

3. WOTF (Web Open Type Font)

- OTF와 TTF로 이루어진 압축된 글꼴 형식이며 W3C 권장.
- 오류가 적고 파일을 불러오는데 시간이 적게 소요된다.
- 폰트 굵기마다 직접 설정 해야한다.

4. WOTF 2.0 (Web Open Type Font)

- WOFF보다 더 향상된 압축을 제공하나 지원하지않는 브라우저가 있다.

📘 적용 방법

css로 폰트를 적용할 때 크게 2가지로 나뉜다. 첫번째는 서버(Sever)로 부터 불러오는 방법, 두번째는 로컬(Local)에 있는 폰트를 불러오는 방법이다.

1. CDN (Content Delivery Network)

- 콘텐츠 전송 네트워크라는 의미로, 파일이 업로드된 서버에서 불러오는 방법이다.

- 코드 몇 줄을 추가하는 방식으로 간단하다.

- 단, 서버의 의존을 하기때문에 서버 오류 시 에러가 발생하며 불러오는데 많은 시간이 소요된다.

가장 많이 사용하는 구글 폰트를 예로 사용방법을 알아보자.

아래 링크를 방문하여 원하는 폰트를 선택한다.

Browse Fonts - Google Fonts

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

fonts.google.com

검색 창 옆에 View Selected families 버튼을 클릭

클릭 후 사이드 창이 열리며 해당 폰트에 대한 상세 정보가 나온다.

Review

원하는 폰트 스타일을 추가하거나 삭제할 수 있다.

<link>

<head>안에 추가할 코드를 보여준다.

@import

스타일 시트 안에 추가할 코드를 보여준다.

예제 코드 - link 사용

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Css폰트 적용 예제 - link </title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
  body {font-family: 'Noto Sans KR', sans-serif;}
</style>
</head>
<body>
  
</body>
</html>

예제 코드 - link 사용

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');}

2. Local

실제 파일을 준비하여 Css에서 불러오는 방식으로 적용한다.

@font-face {
	font-family : 'Noto Sans KR';
	font-style : normal;
	font-weight : 100; 
	src: url(../fonts/NotoSansKR-Thin.woff2) format('woff2'), 
    	url(../fonts/NotoSansKR-Thin.woff) format('woff'), 
    	url(../fonts/NotoSansKR-Thin.otf) format('opentype'); 
}

@font-face {
	font-family : 'Noto Sans KR';
	font-style : normal;
	font-weight : 200; /*각 굵기마다 불러와야 한다*/
	src: url(../fonts/NotoSansKR-Thin.woff2) format('woff2'), 
    	url(../fonts/NotoSansKR-Thin.woff) format('woff'), 
    	url(../fonts/NotoSansKR-Thin.otf) format('opentype'); 
}