GitHub Pages 블로그 - 폰트 변경

GitHub Pages에서 포스트의 글자나 각 파트별로 폰트 바꾸는 법

기본 설정

/assets/css/main.scss에 일단 폰트를 import 시켜야 한다.
import는 웹폰트로 import해도 되고 설치형 폰트 ttf을 경로에 넣고 경로를 입력해줘도 된다.

main.scss

@font-face {
  font-family: 'GyeonggiTitleB';
  src: url('/fonts/경기천년제목_Bold.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GyeonggiTitleVB';
  src: url('/fonts/경기천년제목V_Bold.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GyeonggiTitleM';
  src: url('/fonts/경기천년제목_Medium.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'GyeonggiTitleL';
  src: url('/fonts/경기천년제목_Light.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Hack';
  src: url('/fonts/Hack-Regular (noslab-1, slab-i, slashed-0).ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Noto+Sans+KR:wght@400;700&family=Noto+Serif+KR&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

보이는 것처럼 import는 두 가지 방식이 있으니 폰트를 제공하는 곳에서 제공하는 방식으로 import하면 된다. 폰트는 눈누나 구글 폰트를 이용하면 좋다.
이 블로그는 제목/헤더는 경기천년제목 Bold, 본문은 pretendard가 적용되어 있고, 강조되는 부분은 경기천년제목 Medium, 몇몇 요소에 경기천년제목 light가 적용되어 있다.
경기천년제목 Medium은 작은 크기에서 깨져보이게 나온다. 그럴 땐 볼드처리하면 해결된다.
Montserrat는 pretendard와 어울리는 영어 폰트인데 나는 pretendard만 적용하였다.
코드는 Hack폰트를 변형한 폰트를 사용 중이다. 자세한 내용은 여기를 참조바란다.

그리고 /_sass/minimal-mistakes/_variable.scss에서 폰트 변수에 내가 원하는 폰트를 써놓아야 한다.

_variable.scss

/* system typefaces */ // 적용은 여기서 해야함
$serif: 'Noto Serif KR', Georgia, Times, serif !default;
$sans-serif: "Pretendard", 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Roboto", Arial, sans-serif !default;
$monospace: 'Hack', 'Pretendard', Consolas, monospace !default;
$amphasis: 'GyeonggiTitleM';
$title: 'GyeonggiTitleB';

…

$global-font-family: $sans-serif !default;
$header-font-family: $title !default; // 얘는 여기서 수정해야 수정됨
$caption-font-family: $serif !default;

마크다운에서 특정 글자만 폰트 변경

일단 색깔이든 폰트든 <p style=~~로 바꿀 수는 있다. 하지만 이렇게 바꾸는 건 일반적인 글자만 되며, 특별한 글자(링크 등)는 불가능하고 여러가지 요소(글자의 색깔, 크기 등) 중 하나만 적용 가능하다는 단점이 있다.

특별한 글자(링크 등)이나 여러가지 요소(글자의 색깔, 크기 등)을 같이 적용하고 싶다면 아래 코드대로 하면 된다. 이 코드는 html코드인데 Markdown안에 넣으면 적용이 가능하다.

<span style="
font-family: 'GyeonggiTitleM';
font-size: 1.5em;
color: red;
<!--기타 바꾸고 싶은 요소들 여기에 적을 것-->
">
<a href=""></a>
<!--여기에 글자를 적으면 됨-->
</span>

css에서 각 파트별로 폰트 바꾸기

여기 나온 예시말고도 파일 안에서 font-family 바꿀 때 있으니 그때그때 필요하면 보고 바꾸면 될 듯하다.

_masthead.scss 여기서 상단바 수정 가능 (_variable.scss의 변수 써도 되고 그냥 'GyeonggiTitleM'이라고 써도 된다.)

_masthead.scss

&__inner-wrap {
    @include clearfix;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    max-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-family: $amphasis; // 상단바 폰트

_sidebar.scss 여기서 왼쪽 사이드바 수정 가능 (_navigation.scss 얘도 일단 바꿔놓음)

_sidebar.scss

h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 0;
    font-family: $amphasis;
  }

p,
  li {
    font-family: $sans-serif; // author bio, link font
    font-size: $type-size-7;
    line-height: 1.5;
  }

…

.author__urls-wrapper {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  font-family: $amphasis;
  z-index: 20;
  cursor: pointer;

  li:last-child {
    a {
      margin-bottom: 0;
    }
  }

// 이건 내가 추가한 것, 얘로 sns링크 등만 편집 가능
  li{
    font-family: $amphasis;
    font-weight: bold;
    font-size: $type-size-6;
  }

html에서 각 파트별로 폰트 바꾸기

css와 크게 다르지 않다.

archive-single.html, archive-single-custom.html 수정해서 포스트 목록에서 포스트 제목만 폰트 변경함

<span style="
            font-family: 'GyeonggiTitleM';
            ">
              <a href=""></a>
            </span>