style-component와 web font

웹 폰트를 리액트에 적용하는데 시간이 많이 걸렸다.
난 ttf를 format으로 woff로 바꿀 수 있는지 몰랐다.
머리가 나쁘면 손이 고생하는게 맞는 것 같다...
리액트에 web폰트를 적용하고 싶으면 src 폴더에 font 하위 폴더를 만들고 fonts.js를 만들자
필자는 roboto를 적용시켜 보았다.

fonts.js

import { createGlobalStyle } from "styled-components";
import roboto from './Roboto-Black.ttf'

export default createGlobalStyle`
@font-face {
  font-family: "roboto";
  src: local("roboto"),
  url(${roboto}) format('woff');
}
`;

createGlobalStyle <= 이건 뭐임?

내가 작성한 style을 컴포넌트 전역에 적용시킬 수 있는 함수다.

그럼 어느 컴포넌트에서도 가능한거임?

그렇다!

다른 블로그들은 app.js에 많이 적용하지만 필자는 써야하는 단 한곳에 적용하기로 하였다.

import { useState } from "react";
import styled from "styled-components";
import { ReactComponent as EccLogo } from "../Resource/svg/EccLogo.svg";
import GlobalFont from'../Resource/font/fonts'//1
import {
  SignInContainer,
  SignInInputAreaContainer,
  SignInInputArea,
} from "./AuthenticationStyleComponent";
const EccText = styled.h3`
  font-family: "roboto";
`;//2

const SignIn = () => {
  return (
    <SignInContainer>
      <EccLogo style={{ margin: "auto" }} />
      <GlobalFont />//3
      <EccText>asd</EccText>
      <SignInInputAreaContainer>
        <SignInInputArea />
        <SignInInputArea />
      </SignInInputAreaContainer>
    </SignInContainer>
  );
};

export default SignIn;

1) 함수를 만들었으면 import하자
2) 1에서 만든 font-family를 입력하자
3)닫힘태그로 컴포넌트를 상위에 적용시키면 2)에서 font-family가 무리없이 적용된다.