[CSS] 티스토리 스킨 - system-ui 대체 폰트 설정

어느 플랫폼에서든 사용할 수 있는 system-ui 대체 폰트인 Pretendard를 추천하는 글입니다.

티스토리를 공부 기록용으로 사용하면서, 폰트가 눈에 익숙하지 않고 어색해 Noto Sans, Lato, Noto Sans KR ..등을 시도하다가 추천하고싶은 폰트 설정을 찾았다! 🙋🏻‍♀️ (새로운 폰트 설정에 맞춰 line-height, font-weight 등 새로 설정해야할게 있지만 폰트 자체는 눈에 익숙한 폰트여서, 특히 핸드폰에도 적용이되는 폰트여서 마음에 든다!)

Pretendard

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

Pretendard 마땅한 system-ui 글꼴이 없는 환경에서 발생하는 불편함을 해결하고, 9가지 굵기, 가변 글꼴 지원합니다.
Pretendard는 크로스 플랫폼으로 제품을 서비스하고자 할 때, 또는 다국어 타이포그래피 환경이 어색하거나, 한글에서 자간 문제 등으로 생기는 작업 환경에서의 추가적인 작업 소요를 줄이고자 시작된 글꼴 프로젝트입니다. 가능한 눈에 익숙한 모습으로 가져가기 위해 Inter와 본고딕을 바탕으로 Apple의 타이포그래피 환경과 맞췄습니다.

@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;
/* 본문 글 font-weight:400 이다 */

적용 전 후

본인만 알 수 있는 미세한 차이지만 가독성이 훨씬 좋아졌다!

• Lato
  
• Pretendard