깃블로그(13) 폰트 변경

폰트 변경 개요

: 블로그에 가독성을 올리기 위해 폰트(글꼴)을 변경한다. 그런데 저작권 관련하여 피해받는 사람이 꽤 많은듯 하다. 잘 보고 결정해야하는데 구글에서 오픈소스로 제공하는 글골을 사용하기로 했다.

출처에 대하여)
구글에서 제공하는 폰트의 약관을 보면 “나눔글꼴의 출처 표기를 권장합니다.”
라고 되어있는데 권장은 “권하고 장려함” 이다. 의무는 아니니 반드시 표기해야 할 필요는 없다는 걸로 보인다.

적용

: 다음과 같이 적용한다

글꼴 임포트(import)

: 원하는 글꼴을 임포트 한다.

1. 구글웹폰트(https://fonts.google.com/) 이동
2. 원하는 폰트를 찾고 [+ 버튼] 을 클릭
3. 창이 나오면 @import를 누른다. (import하기 위한 주소가 나온다.)

4. 앞뒤의

    <style>
    @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
    </style>
     
   

5. /assets/css/main.scss 의 맨 아래에 복사한 링크를 붙여넣고, 저장

    //구글웹폰트 추가(나눔고딕)
    @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
     
    //카페24웹폰트 추가(Cafe24Oneprettynight)
    @font-face {
      font-family: 'Cafe24Oneprettynight';
      src: local('Cafe24Oneprettynight'), url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
      font-weight: normal;
      font-style: normal;
    }
   
   

6. 임포트 끝

글꼴 적용하기

: 임포트한 글꼴을 본격적으로 반영한다.

sass/minimal-mistakes/_variables.scss

ASIS

/* system typefaces */
$serif: Georgia, Times, serif !default;
$sans-serif: -apple-system, BlinkMacSystemFont, "맑은 고딕", "Roboto", "Segoe UI",
  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace: Monaco, Consolas, "Lucida Console", monospace !default;

TOBE

$serif: Georgia, Times, serif !default;
$sans-serif: -apple-system, BlinkMacSystemFont, "Nanum Gothic", "Roboto", "Segoe UI",
  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace: Monaco, Consolas, "Lucida Console", monospace !default;

참고)
우리가 자주 보는 본문이나 제목 등의 font는 sans-serif의 글꼴을 앞에서부터 차례대로 불러온다.
앞의 두개는, 애플이나 mac의 시스템 폰트이므로,
세 번째에 자리에 임포트한 Nanum Gothic 끌꼴을 추가해주자.

적용 완료

: 폰트가 정상적으로 반영되었다.

전체 변경분은 다음과 같다.

/* ==========================================================================
   Variables
   ========================================================================== */

/*
   Typography
   ========================================================================== */

$doc-font-size: 16 !default;

/* paragraph indention */
$paragraph-indent: false !default; // true, false (default)
$indent-var: 1.3em !default;

/* system typefaces */
/* ASIS
$serif: Georgia, Times, serif !default;
$sans-serif: -apple-system, BlinkMacSystemFont, "맑은 고딕", "Roboto", "Segoe UI",
  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace: Monaco, Consolas, "Lucida Console", monospace !default;
*/

/* TOBE (앞의 두개는, 애플이나 mac의 시스템 폰트이므로, 세 번째에 Nanum Gothic 끌꼴을 추가해주자)  */
/* Nanum Gothic 으로변경 */
$serif: Georgia, Times, serif !default;
$sans-serif: "Iropke Batang", -apple-system, Nanum Gothic, "Roboto", "Segoe UI",
  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace: "Nanum Gothic", Monaco, Consolas, "Lucida Console", monospace !default;
$cute: "Nanum Gothic" !default;

/* sans serif typefaces */
/* ASIS
$sans-serif-narrow: $sans-serif !default;
$helvetica: Helvetica, "Helvetica Neue", Arial, sans-serif !default;
*/

/* TOBE */
$sans-serif-narrow: $sans-serif !default;
$helvetica: "Nanum Gothic", Helvetica, "Helvetica Neue", Arial, sans-serif !default;