Styled-components: GlobalSytles.tsx에 공용 폰트 적용

[GlobalStyles.tsx]

import { createGlobalStyle } from 'styled-components';
import theme from './theme';

const GlobalStyle = createGlobalStyle`
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    *{
        box-sizing:border-box;
    }
    body {
        margin: 0;
        font-family: 'Pretendard-Regular',-apple-system, BlinkMacSystemFont, 'roca', 'Segoe UI', 'Roboto', 'Oxygen',
            'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
            sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    a, a:hover, a:active, a:visited, a:focus {
        color: inherit;        /* Inherits color from parent and applies to all states */
        text-decoration: none; /* Removes underline from links in all states */
        outline: none;         /* Removes outline on focus, can be customized */
    }

    @font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
`;
export default GlobalStyle;

 

공용으로 사용하고 싶은 폰트 : Pretendard-Regular

1. @font-face 데이터 넣어주기

2. body { font-family: 'Pretendard-Regular' .....} 넣어주기 (string으로 넣어줄 것)

 

 

추가 다른 방법으로는,,

[theme.ts]

const color = {
  mangoMain: '#FFA114;',
  mangoLight: '#FDF3C0',
  mangoYellow: '#FFD864',
  mangoNavy: '#01376B',
  gray: '#999999',
  lightgray: '#FAFAFA;'
};

const font = {
  mango: 'Milk Mango Regular',
  agroBold: 'SBAggroB-bold',
  agroLight: 'SBAggroB-light',
  agroRegular: 'SBAggroB-regular',
  pretendard: 'Pretendard-Regular'
};

const fontSize = {
  sm: '17px',
  base: '22px',
  lg: '38px'
};

const theme = {
  color,
  font,
  fontSize
};

export default theme;

 

추가한 다음,

 

[App.css]

@font-face {
  font-family: 'Milk Mango Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Milk Mango Regular'), url('./fonts/MilkMango-z8vjG.woff') format('woff');
}

@font-face {
  font-family: 'SBAggroB-bold';
  font-style: normal;
  font-weight: bold;
  src: url('./fonts/SBAggro/SB_OTF_B.otf') format('opentype');
}

@font-face {
  font-family: 'SBAggroB-light';
  font-style: normal;
  font-weight: light;
  src: url('./fonts/SBAggro/SB_OTF_L.otf') format('opentype');
}

@font-face {
  font-family: 'SBAggroB-regular';
  font-style: normal;
  font-weight: normal;
  src: url('./fonts/SBAggro/SB_OTF_M.otf') format('opentype');
}

@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

 

[style.ts]

const MangoWord = styled.p`
  color: ${theme.color.mangoMain};
  font-family: ${theme.font.mango};
`;

▶ 이렇게 필요한 곳에서 가져다 쓰기도 가능함!

 

끝.