프리텐다드(Pretendard) 글꼴 웹폰트 적용 방법

프리텐다드 웹폰트

일반적인 경우에는 아래의 코드를 각각 CSS와 HTML 중에 선택해서 적용하면 된다.

CSS

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />

다이나믹 서브젯 웹폰트

다소 웹폰트 용량이 무겁게 느껴진다면 동적 서브셋을 제공하는 다이나믹 서브젯으로 적용하면 된다. 페이지에 포함된 글자만 선택적으로 다운로드 하는 방식이며, 위의 경우보다 훨씬 빠른 웹페이지 로딩이 장점이다.

CSS

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css" />

가변 글꼴로 적용

이 방법은 가변글꼴로 적용하는 방식이며, font-weight 속성을 선언하여 보다 다양한 굵기에서도 선명함이 유지된다.

CSS

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css" />

위와 같이 적용하면 된다. 또한, 웹폰트를 티스토리 내부에서 불러오고 싶다면 아래의 파일을 모두 다운로드하여 파일을 모두 업로드한다. 가변글꼴로 저장해서 사용하고 싶다면 압축파일이 아닌 아래의 웹폰트 파일만 따로 설치해서 적용하면 된다.

Pretendard.zip

10.05MB

PretendardVariable.woff2

2.16MB

 

티스토리 블로그에 적용할 경우

CSS

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: local('Pretendard Variable'), url('./images/PretendardVariable.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'Pretendard';
    src: url('./images/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./images/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./images/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./images/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./images/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./images/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./images/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./images/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./images/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}

위와 같은 방식을 통해서 티스토리 블로그에서 프리텐다드 웹폰트를 구현할 수 있다. 상당히 아름다운 글꼴이며, 활용도가 매우 좋고 기존 Apple SD 산돌고딕 Neo가 아름답게 느껴졌다면 프리텐다드 글꼴 역시도 매우 마음에 들 것이라 생각된다.

상업적으로 이용이 가능한 무료 폰트이며, 재배포도 가능하고 어디에서나 자유롭게 활용할 수 있는 폰트다. 이러한 폰트를 제작해주신 글꼴 제작자님께 감사한 마음을 느끼며, 모든 환경에서 가장 아름다운 글꼴을 볼 수 있게 될 것이다.

[CSS] Font-Smoothing 안티앨리어싱 속성

[CSS] Font-Smoothing 안티앨리어싱 속성

 

 

웹폰트로 사용하기 좋은 한글 무료 폰트·글꼴

나눔스퀘어 다운로드(원본/OTF/TTF/압축파일)

애플 산돌고딕 NEO(Apple SD Gothic Neo)

나눔바른고딕 웹폰트 다운로드(woff, eot)

[웹폰트 CDN] 렉시새봄 / 이롭게바탕/ 나눔고딕 / 본고딕 / PT Sans / 서울한강