[react] font

form element는 font-family를 상속받지 않는다.
그래서 body에 font-family를 주어도 글꼴이 변하지 않았음...;; Wow 첨알았다!!

textarea, button { font-family: 'font'; }

이런식으로 각각 써주어야 한다.

리액트에 전역 폰트 주는 법

1. 폰트 다운받기

2. font 폴더 만들어 넣어주기

3. font파일에 css파일 만들기

@font-face {
  font-family: "Bowlby One";
  src: url("./BowlbyOne-Regular.ttf");
}

4. GlobalStyle.js 파일에 적용하기

import { createGlobalStyle } from "styled-components";
import "./assets/fonts/fonts.css";

const GlobalStyle = createGlobalStyle`
body {
  font-family: 'Bowlby One';
}
`

export default GlobalStyle;

5. index.js에서 적용하기

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import GlobalStyle from './GlobalStyle';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <GlobalStyle />
    <App />
  </React.StrictMode>
);