라이브러리 브랜드

Korean English Japanese

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

공유하기
반응형

프리텐다드 웹폰트

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

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 안티앨리어싱 속성

Font-Smoothing 웹폰트를 적용할 때, Font-Smoothing 속성의 안티앨리어싱 속성을 적용하면 폰트가 더욱 부드럽게 보일 수 있다. 하지만, 반대로 이야기하면 선명함은 떨어질 수 있다는 얘기다. 따라서,

creativestudio.kr

 

 

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

 

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

※ 나눔글꼴 사용조건을 반드시 확인해보시길 바랍니다. 나눔스퀘어 다운로드 나눔스퀘어 폰트입니다. 나눔글꼴 폰트 중에서 웹과 모바일 환경에도 모두 가독성이 좋은 폰트입니다. 디자인적

creativestudio.kr

 

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

※ 라이센스 이용에 관한 자세한 내용은 위의 애플 법적고지 지적 재산권을 반드시 확인하시길 바랍니다. APPLE SD 산돌고딕 Neo 애플 기본 폰트인 Apple SD 산돌고딕 Neo의 라이선스는 모두 애플이

creativestudio.kr

 

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

나눔바른고딕 웹폰트파일입니다. 사용방법은 Import 방식으로 적용하면 됩니다. 티스토리의 경우에는 스킨편집에서 업로드 후 Import 방식으로 폰트 주소를 선언하고, 스타일시트를 적용시키면 됩

creativestudio.kr

 

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

렉시새봄 / 이롭게바탕/ 나눔고딕 / 본고딕 / PT Sans / 서울한강 /* Font */ @font-face { font-family: "Iropke Batang"; font-style: normal; font-weight: 400; src: url( "https://cdn.jsdelivr.net/gh/jbfac..

creativestudio.kr

반응형
댓글 0
  • 라이브러리 브랜드에 새로운 의견을 남겨주세요.