@Andy_Francev
Frontend Developer

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

Добрый день!
Создаю своё первое приложение на Styled Components.
А как сделать %Subj, и куда класть файлы шрифтов при учёто того, что шрифты должны лежать на нашем сервере?
Я вижу 2 пути:
1) Делать App.css, туда запихивать @font-face и CSS Reset, шрифты класть в public/fonts. Будут ли видны font-family из Стайлед Компонентов?
2) injectGlobal (остаётся вопрос по производительности, и непонятно, куда класть шрифты)
или есть 3) ???
  • Вопрос задан
  • 4469 просмотров
Решения вопроса 2
freislot
@freislot
Frontend-разработчик
я использовал 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';
  }
`;
Ответ написан
rockon404
@rockon404 Куратор тега React
Frontend Developer
Использовать @font-face и настроить webpack-file-loader для файлов шрифтов.
Нет принципиальной разницы будете вы при этом использовать injectGlobal или импорт scss/css файла.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 21:25
2000 руб./за проект
28 мар. 2024, в 21:17
5000 руб./за проект
28 мар. 2024, в 20:46
150000 руб./за проект