오늘의관심사

STUDY

프리텐다드(Pretendard) 폰트 웹폰트 적용, 티스토리 스킨 편집하기(미넴스킨 수정)

오늘의관심사 2022. 5. 31.

프리텐다드(Pretendard) 폰트 웹폰트 적용, 티스토리 스킨 편집하기(미넴스킨 수정)

미넴 스킨에서 기본적으로 옵션으로 제공하고 있는 폰트 3종(기본, 이롭게바탕체, 리디바탕) 외에 다른 폰트를 적용하고 싶으신 분도 계실 수 있습니다. 웹폰트라고 하여 개성있고 가독성이 좋은 무료 웹폰트를 이용하여 원하는 폰트를 티스토리에 적용할 수 있습니다. 일전에 무료 웹폰트를 모아둔 사이트 '눈누'를 이용하여 넥슨 고딕체를 티스토리에 적용한 적이 있습니다. 눈누라는 사이트는 다양한 무료 웹폰트를 이용할 수 있어서 알아두시면 유용합니다.

이번에는 미넴 스킨의 기본 폰트인 Noto Sans DemiLight 대신, 프리텐다드(Pretendard)라는 무료 웹폰트를 적용하는 과정을 정리해보았습니다.

목차

프리텐다드 폰트 다운받는 방법 및 웹폰트 적용하는 방법 2가지

  1. 직접 웹폰트 다운받은 후 티스토리에 업로드 하여 저장하기
  2. 눈누 사이트 또는 github에서 제공하는 프리텐다드 웹폰트 적용하기

첫번째 방법은 프리텐다드 폰트 배포하는 곳에서 폰트를 다운 받은 후 티스토리 스킨 첨부 파일 업로드 파일에 올린 후 웹폰트 주소를 css에서 @font-face로 font-family값과 위치인 src: local 주소를 직접 적용하는 방법입니다. 프리텐다드 폰트 배포하는 곳에서 직접 파일을 다운 받지 않더라도 [GitHub]에서 보기를 눌러 ULR 주소를 알 수 있습니다.

프리텐다드(Pretendard) 폰트 웹폰트 적용, 티스토리 스킨 편집하기(미넴스킨 수정) - 프리텐다드 폰트 다운받는 방법 및 웹폰트 적용하는 방법 2가지

Github 페이지에서 html, css에 삽입할 코드가 안내가 되어있습니다. 이를 복사하여 티스토리 html이나 css에 삽입하면 적용이 됩니다.

프리텐다드(Pretendard) 폰트 웹폰트 적용, 티스토리 스킨 편집하기(미넴스킨 수정) - 프리텐다드 폰트 다운받는 방법 및 웹폰트 적용하는 방법 2가지

 

위의 방법과 맥락적으로 같은 방식이지만  '눈누' 사이트에서 프리텐다드 웹폰트를 티스토리 블로그에 적용하는 방식으로 진행했습니다.

프리텐다드 웹폰트 적용하기

눈누 사이트 프리텐다드 바로가기에서 '웹폰트로 사용'을 클릭하면 css에 삽입할 코드를 복사할 수 있습니다.

프리텐다드(Pretendard) 폰트 웹폰트 적용, 티스토리 스킨 편집하기(미넴스킨 수정) - 프리텐다드 폰트 다운받는 방법 및 웹폰트 적용하는 방법 2가지 - 프리텐다드 웹폰트 적용하기
▲ 눈누 사이트에서 '웹폰트로 사용' 옆 아이콘 클릭

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

{
font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

위와 같은 내용이 복사가 되는데요. 복사된 코드 2개는 아래처럼 적용하면 티스토리 블로그에 웹폰트로 프리텐다드 폰트를 적용할 수 있습니다.

1. html 또는 css에 웹폰트 삽입하기

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

▲ 위의 css를 css에 바로 붙여넣기 하거나 html에 삽입할 수 있는 형태로 변경하여 html에 삽입합니다.

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

▲ 저는 html 로 변경하여 붙여 넣기 했습니다.

① 티스토리 스킨 편집→[html]편집 클릭하기

프리텐다드(Pretendard) 폰트 웹폰트 적용, 티스토리 스킨 편집하기(미넴스킨 수정) - 프리텐다드 폰트 다운받는 방법 및 웹폰트 적용하는 방법 2가지 - 1. html 또는 css에 웹폰트 삽입하기 - ① 티스토리 스킨 편집→[html]편집 클릭하기

티스토리 관리자 페이지에서 [스킨 편집]을 클릭합니다.

프리텐다드(Pretendard) 폰트 웹폰트 적용, 티스토리 스킨 편집하기(미넴스킨 수정) - 프리텐다드 폰트 다운받는 방법 및 웹폰트 적용하는 방법 2가지 - 1. html 또는 css에 웹폰트 삽입하기 - ① 티스토리 스킨 편집→[html]편집 클릭하기

[html 편집]을 클릭합니다.

② <head></head> 안에 복사한 코드를 붙여넣기 합니다.

프리텐다드(Pretendard) 폰트 웹폰트 적용, 티스토리 스킨 편집하기(미넴스킨 수정) - 프리텐다드 폰트 다운받는 방법 및 웹폰트 적용하는 방법 2가지 - 1. html 또는 css에 웹폰트 삽입하기 - ② <head></head> 안에 복사한 코드를 붙여넣기 합니다.

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

위의 코드를 대략 붙여 넣기 했습니다.
이 다음은 font-family에서 Pretendard를 적용하는 것입니다.

2. css에 font-family: Pretendard 적용

font-family 이름은 Pretendard입니다.

{
font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

눈누 사이트에서 복사된 코드는 font-family값을 넣는 곳에 font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;를 넣으라는 의미입니다.

Pretendard 폰트가 없을 경우 그 다음으로 -apple-system 폰트가 적용된다는 뜻이고, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif 순으로 앞의 폰트가 없을 경우 적용되는 폰트 이름을 나열한 것입니다.

font-family: Pretendard;만 사용해도 되지만 우려가 되신다면 위와 같이 대체 폰트를 같이 적어주면 좋습니다.

★ 미넴 스킨에서 폰트 이름 Pretendard 삽입하는 곳 

미넴 스킨에서 Pretendard 폰트 이름을 적는 곳은 html에 위치합니다.

 "Noto Sans DemiLight",AppleSDGothicNeo,"Malgun Gothic","맑은 고딕","돋움",dotum,sans-serif,'Font_Awesome_5_Free' !important;

위의 코드를 찾은 뒤 기본 폰트인 "Noto Sans DemiLight" 앞에 Pretendard,를 입력합니다.

프리텐다드(Pretendard) 폰트 웹폰트 적용, 티스토리 스킨 편집하기(미넴스킨 수정) - 프리텐다드 폰트 다운받는 방법 및 웹폰트 적용하는 방법 2가지 - 2. css에 font-family: Pretendard 적용 - ★ 미넴 스킨에서 폰트 이름 Pretendard 삽입하는 곳 
▲[html]에서 font-family를 찾아 수정한다

Pretendard 다음에 콤마(,)도 넣어주셔야 문제 없이 작동합니다.

위와 같이 설정한 뒤 [적용]을 클릭하면 [티스토리 스킨 편집]-[폰트 설정 (기본 설정 권장)]에서 글꼴을 [기본]으로 설정하면 위에서 설정한 Pretendard(프리텐다드) 웹폰트를 기본 폰트로 설정할 수 있습니다.

프리텐다드(Pretendard) 폰트 웹폰트 적용, 티스토리 스킨 편집하기(미넴스킨 수정) - 프리텐다드 폰트 다운받는 방법 및 웹폰트 적용하는 방법 2가지 - 2. css에 font-family: Pretendard 적용 - ★ 미넴 스킨에서 폰트 이름 Pretendard 삽입하는 곳 

프리텐다드가 아니라도 다른 웹폰트도 같은 방식으로 적용할 수 있기 때문에 미넴스킨에서 웹폰트 적용하고 싶으시다면 위와 같은 방법으로 기본 폰트를 변경해보실 수 있습니다.

프리텐다드(Pretendard) 폰트 웹폰트 적용, 티스토리 스킨 편집하기(미넴스킨 수정) - 프리텐다드 폰트 다운받는 방법 및 웹폰트 적용하는 방법 2가지 - 2. css에 font-family: Pretendard 적용 - ★ 미넴 스킨에서 폰트 이름 Pretendard 삽입하는 곳 프리텐다드(Pretendard) 폰트 웹폰트 적용, 티스토리 스킨 편집하기(미넴스킨 수정) - 프리텐다드 폰트 다운받는 방법 및 웹폰트 적용하는 방법 2가지 - 2. css에 font-family: Pretendard 적용 - ★ 미넴 스킨에서 폰트 이름 Pretendard 삽입하는 곳 
▲ 좌(기본 noto sans) 폰트 ▲ 우(프리텐다드 폰트)

이미지를 클릭하면 커집니다. 큰 화면에서 보면 약간의 차이지만 확실히 다른 느낌을 주는 웹폰트입니다.

같이 읽으면 좋은 글
→프리텐다드 웹폰트 출처
→미넴 스킨에서 h2 h3 h4 밑줄과 색상 CSS HTML 수정 편집 하기
→h2 h3 본문 글자 폰트 크기 변경하기 (티스토리 css 편집 수정 방법)

반응형
저작자표시 비영리 변경금지

'STUDY' 카테고리의 다른 글

색 조합 찾아주는 사이트, 많은 사람들이 사용한 트랜디한 색상을 찾고 싶다면  (0) 2022.06.01
미넴 스킨에서 h2 h3 h4 밑줄과 색상 CSS HTML 수정 편집 하기  (2) 2021.10.07
css를 더 쉽게 수정하기, HTML 편집 프로그램 Visual studio code 다운 후기  (0) 2021.10.05
링크 URL 뒤에 이모티콘이나 어썸 폰트 아이콘 붙이는 방법 (::after css를 활용)  (0) 2021.09.22
::before를 활용하여 강조 표시 안내 티스토리 글상자 박스 만들기 (어썸폰트)  (0) 2021.07.31

댓글

티스토리툴바