[React]React 프로젝트 폰트 변경하기(눈누)

2024. 3. 30. 20:58·React

프로젝트를 진행하는데 폰트를 바꾸면 더 예쁘겠다!라는 생각이 들어서 팀원들과 상의 후에 폰트를 바꾸기로 결정했다.

적용할 폰트는 이사만루 !!
https://noonnu.cc/font_page/463

 

눈누

이사만루 - 공게임즈 X 폰트릭스

noonnu.cc

깔끔하고 글씨 변형이 없는 폰트를 원해서 이걸로 채택했다.

적용 방법

위의 링크를 타고 들어가서 폰트를 다운 받아준다.

src/font 폴더를 하나 만들어서 그 안에 저장해준다.

폰트 두께에 따라 light, medium, bold가 존재하는데 나는 하나만 저장해서 사용했다.

코드 수정

그리고 전체 적용을 해주기 위해서

index.css에서 적용해주었다.

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "esamanru";
  src: url("./font/esamanru_Light.ttf");
}

다음과 같이 선언해준다.

#root {
    font-family: "esamanru";
}

전체 적용을 위해서 root에 적어주었더니 잘 적용이 됐다.

적용 인증샷✌🏻

짜잔 적용 완료!!

'React' 카테고리의 다른 글

[React]axios multiple request(request 여러 개 요청하기)  (6) 2024.04.30
[React]onFocus, onBlur  (0) 2024.04.17
[React] 상태관리 라이브러리 Recoil  (0) 2024.03.29
[React]Tailwind CSS 설치하기  (0) 2024.03.27
[React]react-hook-form로 회원가입 구현  (1) 2024.03.07
'React' 카테고리의 다른 글
  • [React]axios multiple request(request 여러 개 요청하기)
  • [React]onFocus, onBlur
  • [React] 상태관리 라이브러리 Recoil
  • [React]Tailwind CSS 설치하기
>동구리<
>동구리<
  • >동구리<
    데굴데굴 굴러가는 히동구리
    >동구리<
  • 전체
    오늘
    어제
    • 분류 전체보기
      • WEB
      • HTML,CSS,JS
      • React
      • 개발
      • Git
      • 이것저것
      • Algorithm
        • Programmers
        • Study
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    이벤트 전파
    리액트 #React #생명주기 #Lifecycle #훅 #Hook
    ouline
    http1
    js 동작원리
    리액트 #React #아토믹디자인 #아토믹디자인패턴
    JITC
    배열 생성
    adaptive jitc
    border vs outline
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
>동구리<
[React]React 프로젝트 폰트 변경하기(눈누)
상단으로

티스토리툴바