애플 시스템 서체를 닮은 무료 폰트, Pretendard

Pretendard 폰트는 많은 홈페이지와 앱에서도 사용되는 무료 폰트이다.

Apple의 시스템 폰트를 대체할 목적으로 만들어졌고, Apple 특유의 가독성이 좋은 폰트의 특성을 닮아있어 가장 많이 사용되는 무료 폰트 중 하나이다.

본고딕을 Apple SD 산들고딕과 맞춰서 개발

Pretendard 폰트 홈페이지에서 소개하듯, Pretendard 폰트는 본고딕 글꼴을 Apple SD 산들고딕에 맞추는 과정을 거쳐서 개발되었다.

Apple의 시스템 폰트를 닮아있기 때문에 iOS와 안드로이드의 폰트의 통일성을 맞추기 위해 많이 채택된다고도 한다.

Pretendard 폰트 미리보기

현재 진행하고 있는 웹페이지 개발 프로젝트에서도 Pretendard 폰트를 사용하게 되었다.

폰트를 사용하기 위해서는 Pretendard 폰트 홈페이지에서 폰트 파일을 다운로드 받아야 한다.

 

Pretendard 폰트 사용하기

https://cactus.tistory.com/306

Pretendard

티스토리 블로그 링크이지만, Pretendard 폰트의 홈페이지다.

프리텐다드 다운로드

공식 홈페이지에 접속해서 스크롤을 조금만 내리면, 글꼴 다운로드 버튼이 보인다.

다운로드 받아준다. 일본어 버전도 따로 있나보다.

한국어 홈페이지를 개발하는데 사용할 예정이라, 그냥 글꼴 다운로드로 다운받아주었다.

Pretendard woff 폰트 파일 디렉토리

다운로드 받은 폰트 압축파일 안에 web > static 디렉토리 안에는 woff, woff2 등 웹에 사용할 수 있는 폰트 파일이 있다.

/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(./woff2/Pretendard-Black.woff2) format('woff2'), url(./woff/Pretendard-Black.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(./woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(./woff/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(./woff2/Pretendard-Bold.woff2) format('woff2'), url(./woff/Pretendard-Bold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(./woff2/Pretendard-SemiBold.woff2) format('woff2'), url(./woff/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(./woff2/Pretendard-Medium.woff2) format('woff2'), url(./woff/Pretendard-Medium.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(./woff2/Pretendard-Regular.woff2) format('woff2'), url(./woff/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(./woff2/Pretendard-Light.woff2) format('woff2'), url(./woff/Pretendard-Light.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(./woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(./woff/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(./woff2/Pretendard-Thin.woff2) format('woff2'), url(./woff/Pretendard-Thin.woff) format('woff');
}

친절하게도 웹 개발에 그대로 사용할 수 있는 css 파일도 함께 첨부되어있었다.

Pretendard otf와 ttf 파일들

otf 파일은 public > static 디렉토리에,

ttf 파일은 public > static > alrternative 디렉토리에 있다.

보통은 폰트 다운로드를 받고 폰트 파일 변환 과정을 거치는데, Pretendard 폰트에는 ttf파일, woff 파일까지 있어서 따로 변환 과정을 거치지 않아도 돼서 좋았다.

 

다운로드 받은 폰트 파일들을 개발 환경의 원하는 경로에 올리고, css로 지정해서 사용하면 된다.

web > static 디렉토리 안의 woff 파일만 넣고, 같이 있던 css를 그대로 사용해도 무방하다.

@font-face의 url 경로만 개발 환경에 맞게 바꿔주면 된다.