K

Grad. student in mathematics

관련 커밋: 링크

한글 폰트와 흘림체

폰트를 추가하는 것은 원래는 그렇게 복잡한 문제는 아니지만, 나는 여기에 추가하고 싶은 기능이 있어 문제가 약간 복잡해졌다.

이탤릭체는 단순한 기울임꼴과는 다르다. 살제로 HTML 태그에서는 이를 italic과 oblique로 구별한다. 한글의 경우, 이들 태그가 일괄적으로 기울임체로 표기된다. 당연한 이야기이지만 이렇게 표시한 결과가 보기 좋을 리 없다. 예를 들어, 폰트를 추가하기 전에는 문장 일부를 기울임체로 바꾸면 다음과 같이 어색한 모양이 만들어졌었다.

slanted_text

$\LaTeX$의 한국어 설명서에는 이에 대한 것을 다음과 같이 설명하고 있다.

lshort_ko

나도 이에 맞추어 한글 기울임체를 적을 때, 별도의 서체를 지정하기로 하였다.

또 다른 문제는 이렇게 한글을 표기할 때 흘림체 대신 기울임체를 사용하는 관행이 굳어지다보니, 대부분의 한글폰트는 영어의 이탤릭체를 표기하는 데에도 흘림체 대신 기울임체를 사용한다는 것이었다.

폰트 추가

이와 같은 문제들로 인해

  • 본문의 한글 글꼴
  • 기울임체 한글 글꼴
  • 영문 글꼴

최소 세 가지의 글꼴을 하나로 사용해야 한다. 약간의 검색을 통해 이를 @font-face로 해결할 수 있다는 생각을 하게 되었다.

Minimal-mistakes 테마의 경우 글꼴은 _sass/minimal-mistakes/_variables.scss파일에서 관리한다. 또, 글꼴은 assets/css/에 저장되도록 하는 것이 기본이다.1 그러나 나는 assets/css/폴더가 지저분해지는 것이 싫으므로, 이 아래에 하위 디렉터리로 assets/css/fonts를 만들고 여기에 폰트 파일들을 집어넣었다. 또, 레거시 환경에서 접속시에도 동일한 페이지를 보도록 하고 싶어서 woff2 뿐만 아니라 fallback으로 woff도 접근 가능하도록 해 놓았다.

예를 들어 다음은 세리프 계열 폰트 중, 일반 글꼴을 지정한 부분이다.

/* Personal_font-serif */

@font-face {
  font-family: "MySerifFont";
  font-style: normal;
  src: url('fonts/MaruBuri-Regular.woff2') format('woff2');
  src: url('fonts/MaruBuri-Regular.woff') format('woff');
  unicode-range:U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+0030-0039, U+005B, U+005D;
}

@font-face {
  font-family: "MySerifFont";
  font-style: normal;
  src: url('fonts/Merriweather-Light.woff2') format('woff2');
  src: url('fonts/Merriweather-Light.woff') format('woff');
  unicode-range: U+0020-0027, U+0040-005A, U+005C, U+005E-007F;
}
  • 위에서 불러온 폰트와 아래에서 불러온 폰트는 font-family가 MySerifFont로 동일하므로 같은 폰트로 취급된다.
    • 그러나 unicode-range를 통해 위의 폰트(마루부리)는 한글, 숫자, 괄호 등에만 적용되고, 아래의 폰트(Merriweather)는 영어에만 적용된다.
    • 이와 비슷하게, font-family를 MySerifFont로 고정한 상태에서 font-style: italic, 그리고 font-weight: bold 등을 다른 폰트, 혹은 두꺼운 폰트로 적용하였다.
  • src는 원래대로라면 url('Maruburi.woff2')처럼만 적어도 충분하지만, 나는 위에서 폰트 파일들을 assets/css/ 폴더 대신 그 하위 디렉터리 fonts/에 저장했으므로 url('fonts/Maruburi.woff2')과 같이 불러와야 한다.
    • 또 src 관련해서 미스터리한 것이 있는데, 원래대로라면 Safari도 woff2를 지원하므로 다음의 코드 
      src: url('fonts/MaruBuri-Regular.woff2') format('woff2'),
     url('fonts/MaruBuri-Regular.woff') format('woff');

      와 같은 식으로 적었을 때 잘 작동해야 하는데 작동하지 않았다. 이것저것 건드려보다 위와 같이 src:를 두 개 넣어서 해결했다.

  • 이와 같은 일을 MySansSerif에 대해서도 진행했다. 다만 산세리프 계열에서는 흘림체를 사용할 일이 없어 영어폰트를 따로 지정하지 않았고, font-style: italic에도 지정할 폰트가 없어 일이 줄었다.
  • 마지막으로 MySerifFont에서 정의한 italic체의 경우는 새로운 용어를 정의할 때만 사용하기로 하고, 대신 본문에서 강조가 필요할 때 사용할 MyEmphFont도 만들었다.

어쨌든 이렇게 추가한 행들은 단순히 사용할 폰트만 지정한 것이라 어떠한 변화도 없다. 폰트를 적용하려면 같은 파일 내의 다음의 코드

/* 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;

를 손봐야 한다. 위의 코드는 세리프 계열과 산세리프 계열의 글꼴을 출력할 때, 왼쪽에 있는 글꼴부터 순서대로 시도하도록 짜여진 코드다. 따라서 맨 앞에 방금 정의한 폰트를 추가해준다.

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

마지막으로 나는 본문이 세리프 계열 글꼴로 표시되기를 원하므로, 같은 파일의

$global-font-family: $sans-serif !default;

를

$global-font-family: $serif !default;

으로 바꿔줬다.

또, 글자들이 약간 큰 것 같아서 _reset.scss에서 바꾸어 주었다. 처음에는 _variables.scss에 $doc-font-size: 16px가 있어서 이걸 수정했었는데 본문과는 별로 관계없는 코드인 것 같다.

마지막으로 한글은 영어보다는 행간이 넓은 것이 보기 좋으므로, _page.scss파일의

  p,
  li,
  dl {
    font-size: 1em;
  }

부분에 line-height:1.7;를 추가해 주었다. 눈대중으로 보았을 때 기본 설정은 1.5인듯 하다.

참고자료

  • 이 글에서 만든 @font-face 문법은 여기를 참고하였다.
  • 또, 원래는 src에 eot, svg, ttf 등의 다양한 확장자를 넣었었는데 stack exchange의 질문글과 그 답변을 보고 이를 woff와 woff2로만 간추렸다.

  1. 물론 웹폰트를 사용하는 것이 좋지만, 최대한 사이트가 self-contained이도록 하고 싶었다. ↩

댓글남기기