TIL39-01 Styled-components 전역스타일링으로 폰트 적용

Styled-components

• Css-in-Js 방식의 패키지 (그 외 패키지 emoton, tailwindcss 등)
• 자바스크립트 코드로 CSS코드를 작성하여 컴포넌트를 꾸미는 방식
  (1) VScode 플러인 설치 : vscode-styled-components
  (2) yarn 에서 styled-components 설치하기

yarn andd styled-components

GlobalStyles

• 폰트를 전역으로 적용하기 위해선 Globalstyles.js에 아래와 같은 코드를 작성해줘야한다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
    body{
        font-family: 'IBMPlexSansKR-Regular';
    }
`;
export default GlobalStyle;

• App.js 에 GlobalStyle을 import한 뒤 최상위 컴포넌트 위에 위치 시킨다.

import Router from './shared/Router';
import './App.css';
import GlobalStyle from './GlobalStyle';

const queryClient = new QueryClient();

function App() {
    return (
        <>
            <GlobalStyle />
                <Router />
        </>
    );
}

export default App;

적용이 안될 경우

• 위와 같이 해보았으나 폰트가 적용이 안됐다.
• App.css에 폰트관련 소스를 넣어줘야 적용되는 걸 알 수 있었다.

@font-face {
    font-family: 'IBMPlexSansKR-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff')
        format('woff');
    font-weight: normal;
    font-style: normal;
}