[GithubPages] 글씨체 변경

전체 글씨체 변경

1. 구글 폰트에서 원하는 폰트를 선택

• 내가 고른 폰트 : Gowun Dodum

2. custom.html수정

링크 부분을 복사하여 _includes/head/custom.html에 붙여넣습니다

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

3. _variables.scss 수정

minimal-mistakes/_sass/minimal-mistakes/_variables.scss에서 sans-serif부분에 "Gowun Dodum"를 추가합니다.

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

수정 전

수정 후

코드블럭 글씨체 변경

1. 원하는 코드블럭 글씨체 선택

네이버의 d2coding을 css파일로 변환하신 분이 계셔서 아래 사이트에서 참고하였습니다.

https://github.com/Joungkyun/font-d2coding

2. custom.html수정

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<link href="http://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css" rel="stylesheet" type="text/css">

3. _variables.scss 수정

minimal-mistakes/_sass/minimal-mistakes/_variables.scss에서 $monospace부분에 D2Coding, 'D2 coding'를 추가합니다.

$monospace: D2Coding, 'D2 coding', Monaco, Consolas, "Lucida Console", monospace !default;

_sass\minimal-mistakes\_syntax.scss의 div.highlighter-rouge, figure.highlight에서 font-size와 line-height를 좀더 늘려주었습니다.

div.highlighter-rouge,
figure.highlight {
  position: relative;
  margin-bottom: 1em;
  background: $base00;
  color: $base05;
  font-family: $monospace;
  font-size: $type-size-5;
  line-height: 2;
  border-radius: $border-radius;

  > pre,
  pre.highlight {
    margin: 0;
    padding: 1em;
  }
}

수정 전

사진 추가 예정

수정 후