주요 콘텐츠로 건너뛰기

Google 글꼴 사용하기

  1. Google Fonts 에서 원하는 글꼴을 선택합니다.

  2. 글꼴 페이지에서 Get font 버튼을 찾아 클릭합니다.

1

  1. Get embed code를 클릭합니다.

2

  1. @import를 선택합니다.

3

  1. 여기서는 두 부분의 내용을 복사해야 합니다.

4

첫 번째 부분

예를 들어, 제가 선택한 이 글꼴에서 Google이 제공한 임베드 코드는 다음과 같습니다.

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&display=swap');
</style>

여기서는 URL에서 물음표 뒤의 부분만 복사해, 확장 프로그램 설정 페이지의 Google Fonts (Font families) 항목에 붙여 넣으면 됩니다. 이 예시에서는 family=Noto+Sans+JP:[email protected]&display=swap 만 복사하면 됩니다.

두 번째 부분

이 글꼴에서 Google이 제공한 스타일 코드는 다음과 같습니다.

// <uniquifier>: 고유하고 설명적인 클래스 이름을 사용하세요
// <weight>: 100에서 900 사이의 값을 사용하세요

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

여기서는 위 그림의 빨간 박스로 표시된 부분만 필요합니다.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

가끔 스타일 안의 일부 값은 직접 채워 넣어야 합니다. 예를 들어 이 글꼴에서는 font-weight 값이 <weight> 로 되어 있는데, 이는 우리가 직접 값을 입력해야 한다는 뜻입니다. 이런 입력이 필요한 부분은 보통 <> 로 표시되어 있으며, 사용할 수 있는 값은 Mozilla 에서 확인할 수 있습니다.

이 font-weight 에는 normal 을 넣으면 됩니다.

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;

이 내용을 확장 프로그램 설정 페이지의 Google Fonts (CSS properties) 항목에 붙여 넣습니다.

  1. 설정을 완료합니다.

5

  1. 영상 페이지로 돌아가면 글꼴이 적용된 것을 확인할 수 있습니다. 아래 이미지는 각각 Noto Sans Japanese 와 Noto Serif Japanese 를 사용한 예시입니다.

6