Как подключать шрифты и CSS Reset к приложению на Styled Components?

Question

[Андрей безфамилии]

Добрый день!
Создаю своё первое приложение на Styled Components.
А как сделать %Subj, и куда класть файлы шрифтов при учёто того, что шрифты должны лежать на нашем сервере?
Я вижу 2 пути:
1) Делать App.css, туда запихивать @font-face и CSS Reset, шрифты класть в public/fonts. Будут ли видны font-family из Стайлед Компонентов?
2) injectGlobal (остаётся вопрос по производительности, и непонятно, куда класть шрифты)
или есть 3) ???

Answer 1

[Павел Антонов]

я использовал global в вашей ситуации вот пример
функция fontFace подключает шрифты, require их загружает из указанной папки, в итоге подключение выглядит так

${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Bold', 600, 'normal')}

import { createGlobalStyle } from 'styled-components';

export function fontFace(name, src, fontWeight = 'normal', fontStyle = 'normal'){
    /* eslint-disable */
    return `
      @font-face{
          font-family: "${name}";
          src: url(${require('../../../../fonts/' + src + '.eot')});
          src: url(${require('../../../../fonts/' + src + '.eot')}?#iefix) format("embedded-opentype"),
               url(${require('../../../../fonts/' + src + '.woff')}) format("woff"),
               url(${require('../../../../fonts/' + src + '.ttf')}) format("truetype"),
               url(${require('../../../../fonts/' + src + '.svg')}#${name}) format("svg");

          font-style: ${fontStyle};
          font-weight: ${fontWeight};
      }
  `;
}

export const GlobalStyle = createGlobalStyle`
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Thin', 100, 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Light', 300, 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Roman', 'normal', 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Medium', 500, 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Bold', 600, 'normal')}

  *{
    box-sizing: border-box;
  }

  a{
    color: #17b0e7;
    text-decoration: none;
  }

  body{
    font-family: 'HelveticaNeue';
  }
`;

Comments

[Divji]

спасибо заюзал, все четко как часы)

Answer 2

[Антон Спирин]

Использовать @font-face и настроить webpack-file-loader для файлов шрифтов.
Нет принципиальной разницы будете вы при этом использовать injectGlobal или импорт scss/css файла.

Comments

[Андрей безфамилии]

Поскольку используется Create React App, то для этого предстоит сделать eject? Не очень-бы хотелось. По-другому совсем никак?

[Антон Спирин]

Андрей Францев, я c Create React App мало знаком, но судя по документации, file-loader там встроен.