커스텀 폰트 설정하기

커스텀 폰트는 현대 웹 애플리케이션에서 거의 표준으로 자리 잡았습니다. 우리는 Google Fonts를 사용해 노트 앱에 커스텀 폰트를 설정할 것입니다.

이 과정에서 새로 만든 React.js 앱의 구조를 살펴볼 기회도 얻을 수 있습니다.

Google Fonts 포함하기

우리 프로젝트에서는 세리프(PT Serif)와 산스 세리프(Open Sans) 폰트 조합을 사용할 예정입니다. 이 폰트들은 Google Fonts를 통해 제공되며, 우리가 직접 호스팅할 필요 없이 바로 사용할 수 있습니다.

먼저 HTML에 이 폰트들을 포함시켜 보겠습니다. 우리의 React.js 앱은 단일 HTML 파일을 사용하고 있습니다.

Change indicator public/index.html 파일을 편집하고, HTML의 <head> 섹션에 다음 줄을 추가하여 두 폰트를 포함시킵니다.

<link
  rel="stylesheet"
  type="text/css"
  href="https://fonts.googleapis.com/css?family=PT+Serif|Open+Sans:300,400,600,700,800"
/>

여기서는 Open Sans 폰트의 5가지 다른 두께(300, 400, 600, 700, 800)를 참조하고 있습니다.

폰트를 스타일에 추가하기

이제 새로 추가한 폰트를 스타일시트에 적용할 준비가 되었습니다. Create React App은 각 컴포넌트의 스타일을 분리하고, 프로젝트의 메인 스타일시트를 src/index.css에 위치시킵니다.

Change indicator src/index.css 파일에서 body 태그의 현재 스타일을 다음으로 변경해 보겠습니다.

body {
  margin: 0;
  padding: 0;
  color: #333;
  font-size: 16px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "Open Sans", sans-serif;
}

Change indicator 그리고 헤더 태그의 폰트를 새로운 Serif 폰트로 변경하기 위해 다음 블록을 CSS 파일에 추가합니다.

h1, h2, h3, h4, h5, h6 {
  font-family: "PT Serif", serif;
}

이제 브라우저에서 새 앱을 확인하면, 라이브 리로딩 덕분에 새로운 폰트가 자동으로 업데이트된 것을 볼 수 있습니다.

커스텀 폰트 업데이트 스크린샷

스타일 추가 작업을 계속 이어가며, 앱을 구축하는 동안 일관된 UI Kit을 사용할 수 있도록 Bootstrap을 설정하겠습니다.