차곡차곡

[React] 리액트 폰트 적용하기 본문

Web programming/React

[React] 리액트 폰트 적용하기

sohy 2022. 8. 12. 18:30

1. 아래 사이트에서 원하는 폰트 선택

 

눈누

상업용 무료한글폰트 사이트

noonnu.cc

 

2. 폰트 적용 코드 복사

 

3. App.css 에 해당 코드 붙여넣기 (이때 App.js에 App.css가 import 되어 있어야 한다.)

@font-face {
	font-family: "Happiness-Sans-Title";
	src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/Happiness-Sans-Title.woff2")
		format("woff2");
	font-weight: normal;
	font-style: normal;
}

 

 

+ 다운로드하여 로컬 폰트 적용하는 법

src에 폰트가 저장돼 있는 경로를 넣어주면 된다.

 

[React] 폰트입혀보기 리액트🥪🥓

React 폰트 설정하기

velog.io

 

 

[react] 폰트파일(.ttf) 로컬 폰트 적용하기

기본 폰트는 밋밋하다 가지고 있는 파일을 적용해보자 내가 가지고있는 괜찮은 애들인데 구글폰트 여기서 다운받아도 된다. fonts.google.com/ 경로만 설정하면 되기 때문에 아무데나 src 폴더에 font

coding-hwije.tistory.com

 

저작자표시

'Web programming > React' 카테고리의 다른 글

Custom Google Login with DRF, React (+ TypeScript)  (0) 2023.04.26
[React] 모달 세로 가운데 정렬, css 말풍선 모양 만들기, n일 동안 보이지 않기 팝업창 만들기  (0) 2023.04.18
[React] 부트스트랩 적용하기  (2) 2022.08.04
[React/Error] API 에러 (Request failed with status code 429)  (4) 2022.07.20
[React/Error] axios.get 에러 TypeError: Cannot read properties of undefined (reading 'get')  (0) 2022.07.20
'Web programming/React' Related Articles more
Comments