Typora 폰트 변경 방법

Typora 폰트 바꾸기

typora의 글씨체를 바꾸는 방법을 알아보자.

* typora github theme의 기본 글씨체는 Open Sans다.

이 포스팅에서는 Ubuntu, 렉시새봄R, Noto Sans Korean, Merriweather-Light폰트로 바꿔볼 것이다.

---

Typora의 폰트를 바꾸는 방법은 두 개가 있다.

1. 웹폰트 이용하기

2. 테마 폴더에 폰트를 넣어서 이용하기

웹폰트를 이용하는 방법은 로딩속도가 느리거나, 인터넷 연결이 안 되면 폰트가 적용되지 않으므로 2번 방법을 이용할 것이다. 웹 폰트를 이용하는 방법은 https://support.typora.io/Custom-Font/를 참고하자.

1. user.css 생성

typora에서 폰트를 변경하려면 css파일을 이용하여야 한다. 테마폴더의 각 테마별 css를 수정하여도 되지만, 원본을 지키고 싶다면 base.user.css파일과 {theme name}.user.css파일을 이용하자.

User custom CSS 만드는 법

1. 환경설정 - 테마폴더 열기

2. base.user.css 혹은 {theme name}.user.css를 생성한다.

   base는 모든 테마에 공통적으로 적용되고, them name~은 해당 테마에만 적용이 된다.

3. base.user 혹은 {theme name}.user 폴더를 theme폴더 밑에 생성한다.

2. 폰트 준비하기

typora theme폴더에 집어넣을 폰트 파일(.woff2,ttf,otf...)를 준비한다. 구글 웹폰트 사이트에 많다.

https://fonts.google.com/ //구글 웹폰트: 영어 위주

https://fonts.google.com/earlyaccess //google font earlyaccess: 한글도 있다.

https://www.koreafont.com/ //이쁜 한글폰트가 많다.

3. CSS 편집하기

github 테마를 수정할 것이므로, github.user.css 파일과 github.user 폴더를 만들어주었다.

css파일은 그냥 github.css를 복사 한 뒤 이름을 바꾸고, github.user폴더 안에는 바꾸고 싶은 폰트들을 넣는다.

1. css파일에 밑의 내용을 추가해준다.

  @include-when-export url(https://fonts.googleapis.com/css?family=Ubuntu);

왜 넣는지 모르겠지만 원본에 비슷한 내용이 있길래 추가해주었다.

2. 각 폰트에 맞는 내용으로 font-face를 추가해준다.

  
  @font-face {
      font-family: '폰트 이름';
      font-style: normal / italic 중 선택;
      font-weight: normal / bold 중 선택;
     src: local('폰트 파일 이름'),url('폰트 위치.확장자') format('확장자')
  }

예시로 Ubuntu 폰트를 적용해보자.

  @font-face {
      font-family: 'Ubuntu';
      font-style: normal;
      font-weight: normal;
      src: local('Ubuntu-Regular'),url('./github.user/Ubuntu-Regular.ttf') format('ttf')
  }
  ​
  @font-face {
      font-family: 'Ubuntu';
      font-style: italic;
      font-weight: normal;
      src: local('Ubuntu-Italic'),url('./github.user/Ubuntu-Italic.ttf') format('ttf')
  }
  ​
  @font-face {
     font-family: 'Ubuntu';
      font-style: normal;
      font-weight: bold;
      src: local('Ubuntu-Bold'),url('./github.user/Ubuntu-Bold.ttf') format('ttf')
  }
  ​
  @font-face {
      font-family: 'Ubuntu';
      font-style: italic;
      font-weight: bold;
     src: local('Ubuntu-BoldItalic'),url('./github.user/Ubuntu-BoldItalic.ttf') format('ttf')
  }
  ​

3. body부분의 font-family에 바꾸려는 폰트를 추가해준다.

     
     body {
         font-family: "Ubuntu", "LexiSaebomR", "Noto Sans Korean", "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
     ​

   body에 "Ubuntu"를 추가해주었다.

이제 저장 후 typora를 껐다가 키면 폰트가 적용되는 모습을 볼 수 있을 것이다.

---

참고

https://support.typora.io/Custom-Font/

http://wit.nts-corp.com/2017/02/13/4258

http://webdir.tistory.com/440