[React] 폰트 바꾸기

by


1. Google Fonts 웹사이트에 접속합니다.

https://fonts.google.com/

'추천 관련글,

구글 글꼴

훌륭한 타이포그래피를 통해 웹을 더 아름답고, 더 빠르고, 더 개방적으로 만들기…

fonts.google.com


Google 글꼴에 액세스한 후 원하는 글꼴을 찾으십시오.

2. 글꼴 다운로드 및 추출


원하는 글꼴을 클릭하면 다운로드 버튼이 있습니다.

그런 다음 프로젝트 폴더의 원하는 위치에 압축합니다. 나의 경우에는

src 폴더 안에 Assets 폴더를 만들고 그 안에 Fonts 폴더를 만들어서 사용하는 폰트를 모아봤습니다.


React 프로젝트의 글꼴 폴더

Google Fonts에서 다운로드한 글꼴의 압축을 풀면 다음과 같은 파일이 있습니다.


.ttf 및 .txt 파일

그 중 폰트 파일은 ttf 파일입니다. .txt 파일에 저작권 정보가 포함되어 있는 것 같습니다.

3. index.css 수정

src 폴더의 index.css 파일을 편집합니다. 

@font-face {
	font-family: "googleSingleDay";
	src: url(./assets/fonts/Single_Day/SingleDay-Regular.ttf);
}

index.css 파일에 다음을 추가합니다.

글꼴을 변수로 설정하고 싶기 때문에 나중에 index.css 파일에 :root{}를 추가합니다. 

:root {
	--font-googleGugi: "googleGugi";
	--font-googleSingleDay: "googleSingleDay";
}

여기서 변수는 이전에 @font-face에 설정한 글꼴 패밀리 이름을 쓴다는 의미입니다.

4. 컴포넌트에 적용


styled-component에서 font-family를 설정하는 방법입니다. 변수를 이전에 설정한 대로 설정하면 다음과 같이 화면에 글꼴이 적용됩니다.

글꼴이 성공적으로 적용된 것을 볼 수 있습니다.