[Blog] 폰트 적용하기(+빨리 가져오기)

원하는 곳에 원하는 폰트를 적용해보자!
-> 페이지, 왼쪽 사이드바 부분, 상위바 부분, breadcrumbs(경로), 본문

  • 먼저 적용 전과 후를 확인
  • After 그림의 “폰트”의 차이만 볼 것! 나머지 스타일링은 다음 포스팅 참고


Before

image-20220906201537429


After

image



폰트 등록하기

사용폰트는 Coming Soon, 나눔 고딕 코딩, Cafe24Oneprettynight, Iropke Batang 이며 아래와 같은 순서로 진행

폰트 다운 -> 전역변수 등록(폰트 등록) -> 적용 커스텀



폰트 다운 + 빨리 가져오는 TIP

  • 참고 : 폰트 사이트

  • 두 가지 다운 방식이 있고 둘 다 사용중

    • head 태그 방식 - “Nanum Gothic Coding”, “Coming Soon”, “Iropke Batang” 폰트 다운
    • css에 @import 방식 - “Cafe24Oneprettynight” 폰트 다운


_layouts/default.html 에 head 태그 속에 폰트 다운

  • “Nanum Gothic Coding”, “Coming Soon”, “Iropke Batang”
  • css 빨리 가져오는 꿀 팁 - preload
<head>
    <!--폰트 : "Nanum Gothic Coding", "Coming Soon"-->
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Coming+Soon&family=Nanum+Gothic+Coding&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Coming+Soon&family=Nanum+Gothic+Coding&display=swap">
    <!--폰트 : "Iropke Batang"-->
    <link rel="preload" as="style" href="https://cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css">
    <!--폰트(main.css 에서 등록) : "Cafe24Oneprettynight"-->

    <!--main.scss 빨리 로드되게끔.. preload-->
    <link rel="preload" as="style" href="/assets/css/main.css">


assets/css/main.scss 에 @import 방식

  • “Cafe24Oneprettynight”
// "Cafe24Oneprettynight" 폰트 추가
@font-face {
  font-family: 'Cafe24Oneprettynight';
  src: local('Cafe24Oneprettynight'), url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}



전역변수 등록(폰트 등록)

minimal-mistake 테마는 _sass/minimal-mistakes/_variable.scss 파일에 전체적인 css 파일들이 사용할 “전역 변수”를 한곳에 모아 선언하고 있다.
따라서 여기에 원하는 폰트를 설정해주고, 생성한 “전역 변수”로 어디서든 폰트 적용을 할 것이다.

참고로 여기서 폰트 추가하자마자 적용이 되는 이유는 이 “전역변수”가 여기저기서 이미 사용해서
폰트 적용 중 이기 때문에 당연히 바로 적용이 된 것이라는 점!

  • 폰트가 여러 개 나열되는 이유는 우선순위 때문이다
/* system typefaces */
$serif: "Coming Soon", Georgia, Times, serif !default;
$sans-serif: "Iropke Batang", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",
  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace: "Nanum Gothic Coding", Monaco, Consolas, "Lucida Console", monospace !default;
$cute: "Cafe24Oneprettynight" !default;

/* sans serif typefaces */
$sans-serif-narrow: $sans-serif !default;
$helvetica: "Cafe24Oneprettynight", Helvetica, "Helvetica Neue", Arial, sans-serif !default;



폰트 적용하기

폰트가 적용되는 부분들 위주로 확인할 것!

사진은 최근 사진을 가져다 쓴 거기 때문에 “페이지 구조”가 다를 수 있고 이는 추후에 포스팅 된 게시물을 참고하자

크게 아래와 같이 7부위 폰트 적용을 같이 확인해보자

  • 페이지
    • Recent Posts
    • 카테고리별 대표 페이지
  • 왼쪽 사이드바 부분
    • 게시물 안에서의 왼쪽 사이드바
    • 게시물 밖에서의 왼쪽 사이드바
  • 상위바 부분
  • breadcrumbs(경로)
    • 본문과 카테고리별 대표 페이지에 있는 경로
  • 본문



1. 페이지 - Recent Posts(최근 포스트)

제목 - Coming Soon

기본적으로 home.html 에 해당 페이지 제목이 있으며 본인은 이를 archive.html 로 제목 설정을 옮겼다!
이때, archive__subtitle__default 를 _archive.scss 에서 추가하여 해당 제목에 적용했다.

이런 자세한 내부 페이지 구조는 이전 포스팅에서 이미 정리했다.

결론은 _sass/minimal-mistakes/_archive.scss 에서 archive__subtitle__default 코드를 추가하여 사용!

//추가
.archive__subtitle__default{
  margin: 0.8em 0 0;
  padding-bottom: 0.5em; // 추가
  margin-bottom: 0.9em; // 추가
  font-size: $type-size-3;
  color: mix(rgb(84, 100, 173),$primary-color, 40%);
  border-bottom: 1px solid $border-color;
  font-family: $serif; // 수정후

  + .list__item .archive__item-title {
    font-family: $cute; // 수정후
    margin-top: 0.5em;
  }
}


게시물 - Cafe24Oneprettynight

위의 코드에서 보면 list__item 부분도 추가했기 때문에 게시글에 “$cute” 폰트 적용이 됩니다!

그리고 archive__item-title 부분에 “$cute” 꼭 적용! -> Cafe24Oneprettynight 폰트

.archive__item-title {
  font-family: $cute;
  // ...
}


아래 결과 사진

  • Recent Posts 부분에 $serif 인 “Coming Soon” 적용 모습

  • 게시물 제목들 부분에 $cute 인 “Cafe24Oneprettynight” 적용 모습

image



2. 페이지 - 카테고리별 대표 페이지

제목 - Cafe24Oneprettynight

archive__subtitle 을 사용하는 “카테고리별 대표 페이지의 제목”

.archive__subtitle {
  // margin: 1.414em 0 0.5em; // 수정전
  margin: 0.8em 0 0;
  padding-bottom: 0.5em; // 추가
  margin-bottom: 0.9em; // 추가
  // font-size: $type-size-5; // 수정전
  font-size: $type-size-3;
  color: mix(rgb(84, 100, 173),$primary-color, 40%);
  border-bottom: 1px solid $border-color;
  font-family: $cute; // 수정후

  + .list__item .archive__item-title {
    margin-top: 0.5em;
  }
}


게시물 - Cafe24Oneprettynight

위의 코드에서 보면 list__item 부분도 추가했기 때문에 게시글에 “$cute” 폰트 적용이 됩니다!

그리고 archive__item-title 부분에 “$cute” 꼭 적용! -> 위에서 적용했기에 코드 생략


아래 결과 사진

  • 카테고리별 대표 제목 부분에 $cute 인 “Cafe24Oneprettynight” 적용 모습

  • 게시물 제목들 부분에 $cute 인 “Cafe24Oneprettynight” 적용 모습

image



3. 왼쪽 사이드바 부분 - 게시물 안

아래쪽 (=게시물 안, 밖 공통)

  • _navigation.scss 에서 폰트 변경
  • a 태그의 경우 $cute 적용 -> 페이지 이동하는 작은 글자를 의미
  • nav__sub-title 의 경우 $serif 적용 -> 카테고리 명인 큰 글자를 의미
.nav__list .nav__items {
  margin: 0;
  font-size: 1.25rem;

  a { // color: inherit만 있었음
    color: inherit;
    font-size: $type-size-4;
    font-family: $cute;
    // color: mix(#fff,$primary-color,80%);

    &:hover {
      text-decoration: underline;
    }
  }
}

.nav__sub-title {
  font-family: $serif;
}


위쪽 - 이미 폰트적용

아래쪽 부분에 적용하려던 게 위쪽 부분에도 전부 적용이 되었다.

  • 큰 글자 : $serif 인 “Coming Soon” 적용
  • 작은 글자 : $cute 인 “Cafe24Oneprettynight” 적용

image



4. 왼쪽 사이드바 부분 - 게시물 밖

아래쪽은 게시물 안이든 밖이든 공통적으로 같아서 PASS

위쪽

  • _sidebar.scss 에서 폰트 설정
  • South Korea, Emial, Github 있는 li 태그 부분만 $serif 로 적용
sidebar{
	li {
    	font-family: $serif; // 수정
    }
}

.author__content {
  font-family: $cute; // 추가
}

.sidebar .author__name {
  font-family: $cute; // 수정
}

.author__bio {
  font-family: $cute; // 추가
    
  p { // p 추가
    font-family: $cute;
    margin-top: 1.6px;
    margin-bottom: 3px;
  }
}


결과 그림 참고

  • South Korea, Emial, Github 있는 li 태그 부분만 $serif -> Coming Soon 적용
  • 나머지는 $cute -> Cafe24Oneprettynight 적용

image



5. 상위바 부분

  • 제일 상위의 Home, Category, Search 가 있는 곳을 의미한다.

  • _masthead.scss 에서 수정한다.

.masthead {
  &__inner-wrap {
    font-family: $serif; // 수정
  }
}


결과 그림 참고

  • $serif -> Coming Soon 적용

image



6. breadcrumbs (경로부분) - 본문, 카테고리별

페이지 상단에 경로 보이는곳을 의미

  • _navigation.scss 에서 수정
  • 한 번도 사용 안 했던 $sans-serif 를 적용
.breadcrumbs{ 
	font-family: $sans-serif;
}


결과 그림 참고

  • $sans-serif -> Iropke Batang 적용

image



7. 본문 - 게시물 본문

게시글 본문의 게시글 제목 부분을 스타일링 한다.

  • _page.scss 에서 설정한다.
.page__title {
  font-family: $cute; // 수정후
}


본문 폰트를 안건들였으면 문제가 없지만, 건드렸다면 수정을 할 필요가 있다.

  • _base.scss 에서 폰트를 수정하면 되고, 되도록이면 이 파일은 안 건드리게끔 사용하려고 한다.

  • $global-font-family, $header-font-family 전부 $sans-serif 로서 설정되어 있다.

    • 따라서 수정하고 싶으면 _variables.scss 에서 $sans-serif 를 차라리 수정하라.
    • 필자는 Iropke Batang 폰트로 설정되어 있어서 본문 전체가 해당 폰트이다.
    body {
  font-family: $global-font-family;
}
  
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $header-font-family;
}


아래 결과 사진

  • 게시글 본문 제목 : $cute -> Cafe24Oneprettynight 폰트 적용
  • 게시글 본문 : $sans-serif -> Iropke Batang 폰트 적용

image

댓글남기기

참고