티스토리 웹폰트 적용방법 (프리텐다드)

안녕하세요. 

이번엔 폰트 적용방법에 대해 기록하려 합니다.

 

 

먼저 폰트 적용방법에는 크게 2가지가 있습니다. 

1. 웹폰트 코드 삽입 (http, css)
2. 폰트 다운로드

 

1번의 방법에 대해 살펴보려 합니다. 

 

 

---

프리텐다드 웹폰트 적용

 

1. 블로그 설정에서 [스킨 편집] 

 

2. [html 편집] 클릭

 

 

3. html 이나 css 소스코드에 웹폰트 코드 추가 

• html 

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />

 

 

• css 

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

 

 

 

저는 html head 태그 안에 코드 추가해 줬습니다. (13번째 라인)

 

 

 

간단하게 웹폰트 적용방법 살펴보았습니다. 

 

프리텐다드 폰트가 깔끔하고 아주 좋습니다. 추천! 

 

맥 추가 수정 사항 

추가로, 

블로그 내 글꼴은 모두 바뀌었는데 게시글 폰트가 apple-system 폰트로 설정되어 있어 확인해 본 결과

 

css 내에서 font-family 코드를 수정해줘야 했습니다. 

 

• 기존코드 

font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;

 

• 변경코드 (어디서든 동일한 환경)

font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

 

아래의 참고 링크에도 나와있습니다!

 

 

 

+ 참고링크 

https://github.com/orioncactus/pretendard

GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ