Orchemi

Orchemi

I start where others stop.

[BlogDev] 블로그 폰트 변경하기

작성:    

업데이트:

카테고리:

태그: , , , ,

도입

본 게시물은 공부하는 식빵맘님의 게시물을 통해 배우고 따라하는 과정입니다. 이 글을 누군가 보고 있다면, 그리고 보다 전문적이고 자세한 설명을 바라신다면 위 링크의 블로그를 확인해보시길.


1. 웹 폰트 사이트에서 폰트 선택

폰트는 다음의 두 사이트에서 찾아서 선택할 수 있다.


가. 눈누

눈누에 접속해서 원하는 폰트를 선택하여 들어간다.

image

나는 깔끔하면서도 둥글둥글한 폰트인 교보손글씨 폰트를 선택했다.

중간에 웹폰트로 사용의 코드를 복사한다. 이 코드는 이후의 과정에서 import한다.

@font-face {
  font-family: "KyoboHand";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}


나. 구글 폰트

구글 폰트에 접속해서 원하는 폰트를 선택하여 들어간다.

image

다양한 언어의 폰트들이 있지만, Language를 한국어(Korean)으로 설정하면 한국어를 지원하는 폰트 목록을 확인할 수 있다.

image

나는 역시 부드러우면서도 가독성이 좋은 Gamja Flower 폰트를 선택했다.

+ Select this style 버튼을 클릭한다.

image

  • CSS에서 Import할 것이라면 @import 코드를 복사
  • HTML에서 Import할 거싱라면 <link> 코드를 복사
@import url("https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap");

<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=Gamja+Flower&display=swap"
  rel="stylesheet"
/>

성능 면에서 더 나은 방법은 <head> 태그 내에 <link> 태그를 사용하여 웹폰트를 import하는 것이라고 한다. 그 이유에 대해서는 확인할 수 없었다.


2. 폰트 Import하기

가. CSS에 Import하기

웹 코드를 복사하여 import하면, 폰트 파일을 다운로드해서 로컬 환경에 저장할 필요가 없다. 원하는 코드를 css 파일이나, HTML의 <style> 태그에 import 한다.

minimal-mistakes의 경우 📂assets/📂css/📃main.scss 파일에 해당 웹 폰트 코드를 붙여넣으면 import가 완료된다.

image

나는 “교보손글씨 폰트” 와 “HS유지체 폰트”를 import했다.


나. HTML에 Import하기

minimal-mistakes의 경우 📂_layout/📃default.html 을 보통 참조하고, 이 html 파일은 다시 📂_include/📂head/📃custom.html 을 참조하므로, 해당 파일에 태그를 넣어주었다.

image

나는 “Gamja Flower” 폰트를 import했다.


3. 폰트 적용하기 : font-family

font-family : "Gamja Flower"

이런 식으로 폰트를 적용하고자 하는 CSS 영역에 위와 같은 코드를 넣어주면 된다.

📂_sass/📂minimal-mistakes/📃_variables.scss 파일에 들어가 /* system typefaces */를 찾는다.

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

Minimal-Mistakes 테마는 위의 📃_variables.scss 파일에 css 파일들이 사용할 전역 변수를 한 데 모아 선언한다. $serif, $sans-serif, $monospace는 minimal-mistakes 자체에서 원래 있던 변수이고, $orchemi 체는 내가 선택한 폰트이다. 폰트를 한 항목에 여러 개 배치하는 경우, 예비 후보 폰트라고 생각하면 좋다. 맨 좌측에 위치할수록 우선순위가 높고, 해당 폰트가 지원하지 않는 어떤 타입이 있을 때 다음 폰트로, 다음 폰트로 넘어가게 되는 것이다.

font-family: "Gamja Flower";

처럼 쓰게 되면 폰트 이름 그대로 적용하는 방식이고,

font-family: $orchemi;

처럼 쓰게 되면 $orchemi 변수로 저장한 Gamja Flower 폰트가 그대로 그 자리에 들어가 적용되게 되는 것이다.


4. 최종 단계

폰트가 반영된 css 파일들을 저장하고 커밋-푸쉬하면 적용이 완료된다.


5. 자세한 내용

minimal-mistakes의 경우 📂docs/📂_docs/📃16-stylesheets.md 에서 htmld의 <link> 태그를 사용하는 등 커스터마이징 팁을 참고하면 된다.


References

댓글남기기

참고