styled-components에 구글 폰트적용하기

Minju Kim·2022년 4월 17일

React

목록 보기

15/15

프로젝트 초기세팅을 하는데, 로고와 전체 적용될 글꼴을 다르게 설정해주고 싶었고, 폰트는 구글폰트에서 가져오고 싶었다.

1. 구글폰트 링크 `index.html`에 삽입

//index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    // 중략, 아래 링크를 html에 삽입합니다.
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&family=Song+Myung&display=swap"
      rel="stylesheet"
    />
    <title>Document</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

2. `GlobalStyle.js`의 body에 아래와 같이 적용

GlobalStyle.js

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}
  * {
    box-sizing : border-box;
  }
  body{
    font-family: 'Noto Sans KR', sans-serif;
  }
`;

export default GlobalStyle;

로고에만 적용해 주고 싶은 폰트를 theme.js에 fontLogo를 통해 변경

import { css } from 'styled-components';

export const theme = {
  mainBlack: '#000000',
  mainWhite: '#FFFFFF',
  mainPink: '#FF385C',
  mainGrey: '#F7F7F7',
  darkGrey: '#797979',

  fontLogo: "'Song Myung', serif",

  fontLarge: '48px',
  fontMedium: '28px',
  fontSemiMedium: '20px',
  fontRegular: '18px',
  fontSmall: '16px',
  fontMicro: '14px',

  weightBold: 700,
  weightSemiBold: 600,
  weightRegular: 400,

  absoluteCenter: css`
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  `,
};

export const mixins = {
  // flex
  flexBox: (direction = 'row', align = 'center', justify = 'center') => `
    display: flex;
    flex-direction: ${direction};
    align-items: ${align};
    justify-content: ${justify};
  `,
};

3. `index.js` 파일 다음과 같이 변경 (react version 18로 업데이트 하여 ReactDom.render은 더이 상 사용되지 않음)

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Router';
import GlobalStyle from './styles/GlobalStyle';
import { ThemeProvider } from 'styled-components';
import { theme, mixins } from './styles/theme';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <GlobalStyle />
    <ThemeProvider theme={{ ...theme, ...mixins }}>
      <Router />
    </ThemeProvider>
  </>
);

리액트가 버전 18로 업데이트되면서 이제 더이상 reactDOM.render를 하지않고, 아래와 같이 createRoot를 통해서 root를 render해주고 있는 점을 기억하기.

You are importing createRoot from 'react-dom' which is not supported | bobbyhadz

import React from 'react';
import Router from './Router';
import GlobalStyle from './styles/GlobalStyle';

import { ThemeProvider } from 'styled-components';
import { theme, mixins } from './styles/theme';
import { createRoot } from 'react-dom/client';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <>
    <GlobalStyle />
    <ThemeProvider theme={{ ...theme, ...mixins }}>
      <Router />
    </ThemeProvider>
  </>
);