새 글꼴 교체 또는 추가

이 가이드는 Google Fonts에서 글꼴을 추가하는 경우에만 적용됩니다. 새 글꼴로 바꾸고 싶다면 Google Fonts을 사용하는 것이 좋습니다. 무료일 뿐만 아니라 더 쉽고 다양한 글꼴을 사용할 수 있습니다. 많은 사람들이 Google Fonts의 글꼴을 사용합니다.

블로그에 글꼴 설치

임베드 코드 카져오기

임베드 코드는 @font-face CSS 코드이며 Google Fonts에서 글꼴을 선택하는 방법을 이미 알고 있다고 가정합니다. 이 튜토리얼에서는 아래의 글꼴을 사용하여 한글 폰트를 예제로 추가해보겠습니다.

<link href='https://fonts.googleapis.com/css2?family=Single+Day&display=swap' rel='stylesheet'>

브라우저를 통해 위에 표시된 URL을 열면 아래와 같은 @font-face CSS 코드가 표시됩니다.

/* 0 */
@font-face {
  font-family: 'Single Day';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/singleday/v5/LYjHdGDjlEgoAcF95EI5jV9tRtXRM_vAklfi4DzhOchwatn58A.0.woff2) format('woff2');
  unicode-range: U+f9ca-fa0b, U+ff03-ff05, U+ff07, U+ff0a-ff0b, U+ff0d-ff19, U+ff1b, U+ff1d, U+ff20-ff5b, U+ff5d, U+ffe0-ffe3, U+ffe5-ffe6;
}

...

/* 119 */
@font-face {
  font-family: 'Single Day';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/singleday/v5/LYjHdGDjlEgoAcF95EI5jV9tRtXRM_vAklfi4DzhOchwatn58A.119.woff2) format('woff2');
  unicode-range: U+20-22, U+27-2a, U+2c-38, U+3a-3b, U+3f, U+41-47, U+4a-4c, U+4f-5d, U+61-7b, U+7d, U+a1, U+ab, U+ae, U+b7, U+bb, U+bf, U+2013-2014, U+201c-201d, U+2122, U+ac00, U+ace0, U+ae30, U+b2e4, U+b85c, U+b9ac, U+c0ac, U+c2a4, U+c2dc, U+c774, U+c778, U+c9c0, U+d558;
}

한글 폰트에 비해 아랍어 및 라틴어(영어) 폰트는 더 쉽고 코드가 간단합니다.

/* arabic */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIIoVeo5.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin-ext */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIkoVeo5.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arefruqaa/v21/WwkbxPW1E165rajQKDulIIcoVQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

위의 코드를 복사하여 블로그의 CSS 코드에 붙여 넣습니다. ]]></b:skin> 코드 바로 앞 또는 AMP(Accelerated Mobile Pages) 사용자의 경우 /*]]>*/</style> 바로 앞에 코드를 붙여 넣습니다.

CSS를 추가하는 가장 쉬운 방법은 Blogger 테마 디자이너를 사용하는 것입니다.

Blogger 대시보드에서 테마 > 맞춤설정을 클릭합니다.
고급 탭을 클릭하고,
'테마 색상' 드롭다운 메뉴를 클릭합니다.
'CSS 추가' 메뉴가 나타날 때까지 아래로 스크롤합니다.
제공된 칸에 CSS 코드를 입력한 다음 저장을 클릭합니다.

새 글꼴 활성화

위의 CSS 코드를 추가하고 나면 글꼴은 이미 블로그에 적용되어 있지만 아직 활성화되지는 않았습니다. 글꼴을 활성화하거나 사용하려면 블로그에 설치된 font-family를 호출하는 새 코드를 추가해야 합니다.

이 튜토리얼의 예제에서 사용된 글꼴은 Single Day이므로 이 글꼴을 활성화하는 코드는 다음과 같습니다.

font-family: 'Single Day', cursive;

게시물에서 직접 사용하는 예는 다음과 같습니다.

<p style="font-family: 'Single Day', cursive;">그들의 장비와 기구는 모두 살아 있다.</p>

위 코드의 렌더링 결과는 다음과 같이 표시됩니다.

Single Day

그들의 장비와 기구는 모두 살아 있다.

위 방법은 설치한 글꼴을 사용하는 표준 방식이지만, 사용하고 싶을 때마다 폰트 패밀리의 이름을 반복해서 작성해야 하기 때문에 불편할 수 있습니다.

더 쉬운 방법

CSS 코드에 새 클래스 이름을 추가하면 글꼴 코드를 반복적으로 작성하지 않아도 됩니다. 예를 들면 다음과 같습니다.

.singledayF{font-family: 'Single Day', cursive;}

위의 CSS 코드에 따라 게시물에서 새 글꼴을 활성화시키려면 class='singledayF'를 추가하기만 하면 됩니다. 예를 들어 아래와 같이 합니다.

<p class='singledayF'>그들의 장비와 기구는 모두 살아 있다.</p>

항상 <p> 태그일 필요는 없으며, <div>, <span> 또는 다른 태그를 사용할 수도 있습니다.

템플릿의 기본 글꼴 변경

템플릿의 기본 글꼴을 변경하려면 방금 했던 것처럼 CSS 코드를 새 글꼴로 바꾸면 됩니다. 일반적으로 대부분의 테마에는 제목 (h1, h2, h3, h4, h5, h6)과 본문(post-body)에 대한 2개의 기본 글꼴이 있습니다.

예를 들어 테마의 본문 글꼴을 새 글꼴로 바꿔보겠습니다.

--fontH: 'Noto Sans KR', sans-serif ;
--fontB: 'Noto Sans KR', sans-serif ;
--fontBa: 'Merriweather', serif ;
--fontC: 'Fira Mono', monospace ;

모든 font-family를 CSS 변수로 추가하여 하나의 코드만 변경하면 전체 글꼴을 바꿀 수 있습니다.

설명:

--fontH— 제목 또는 게시물 제목에 사용되는 글꼴입니다.
--fontB— 본문에 사용되는 글꼴입니다.
--fontBa— 특정 제목에 사용되는 대체 글꼴입니다.
--fontC— 코드 구문 작성에 사용되는 글꼴입니다.

올바른 방법을 적용하면 결과는 다음과 같습니다.

Jua:

그들의 장비와 기구는 모두 살아 있다.그들의 장비와 기구는 모두 살아 있다.그들의 장비와 기구는 모두 살아 있다.그들의 장비와 기구는 모두 살아 있다.그들의 장비와 기구는 모두 살아 있다.그들의 장비와 기구는 모두 살아 있다.그들의 장비와 기구는 모두 살아 있다.그들의 장비와 기구는 모두 살아 있다.그들의 장비와 기구는 모두 살아 있다.그들의 장비와 기구는 모두 살아 있다.

Sunflower:

일부 템플릿은 글꼴 이름이 다를 수 있습니다.

구글 블로그 만들기

새 글꼴 교체 또는 추가

블로그에 글꼴 설치

새 글꼴 활성화

더 쉬운 방법

템플릿의 기본 글꼴 변경

Post a Comment