[Blog]웹 폰트 적용하기

📝웹 폰트 적용하기

📌웹 폰트 고르기

눈누라는 사이트를 이용하여 폰트를 골랐습니다.
https://noonnu.cc/

저는 이롭게 바탕체를 적용해봤습니다.

https://noonnu.cc/font_page/4

📌폰트 임포트

마음에 드는 폰트를 찾아 @import로 시작하는 코드를 복사해서 assets/css/main.scss 파일 맨 아래 부분에 붙여넣습니다.

@import url('//cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css');

main.scss 파일 작성 결과

---
# Only the main Sass file needs front matter (the dashes are enough)
search: false
---

@charset "utf-8";

@import "minimal-mistakes/skins/default"; // skin
@import "minimal-mistakes"; // main partials

@import url('//cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css');

📌폰트 적용하기

_sass/minimal-mistakes/_variables.scss 파일을 열어서 $serif, $sans-serif 부분에 폰트 이름을 써줍니다. 왼쪽에 적힌 폰트들일 수록 우선순위가 높습니다. $serif, $sans-serif 말고 변수를 따로 만들어서 폰트를 적용할 수도 있습니다.

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

_sidebar.scss로 예를 들면 font-family에 따라 폰트가 결정되는 것을 알 수 있습니다.

  p,
  li {
    font-family: $sans-serif;
    font-size: $type-size-6;
    line-height: 1.5;
  }

📌폰트 이름을 알 수 없을 때

아래 폰트 처럼 font-family 뒤에 있는 것이 폰트 이름입니다.

@font-face {
    font-family: 'GangwonEdu_OTFBoldA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

하지만 종종 ‘이롭게 바탕체’ 같이 이름을 알기 어려운 폰트들이 있습니다. 이런 경우 ‘다운로드 페이지로 이동’ 버튼을 눌러 폰트를 만든 회사 홈페이지에 접속하여 폰트 적용 튜토리얼을 참고해서 폰트 이름을 알아낼 수 있습니다.

출처
https://ansohxxn.github.io/blog/font/#site-nav
https://chaelin0722.github.io/blog/web_font/