Как добавить шрифты в styled components?

Question

[Alexander]

Здравствуйте, подскажите пожалуйста почему не добавляются шрифты к приложению create-react-app?
Шрифты лежат в папке src/fonts/
Ошибок при подключении нету, в чем может быть проблема?

import styled, { createGlobalStyle } from 'styled-components'

export function fontFace(
  name: string,
  src: string,
  fontWeight: number | string = 'normal',
  fontStyle: string = '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"),
        font-style: ${fontStyle};
        font-weight: ${fontWeight};
    }
`
}

export const GlobalStyle = createGlobalStyle`
  ${fontFace('OswaldRegular', 'Oswald-Regular', 'normal', 'normal')}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

a {
  text-decoration: none;
}
body {
  font-family: 'OswaldRegular';

}
`

Comments

[WbICHA]

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"),
        font-style: ${fontStyle};
        font-weight: ${fontWeight};
    }
`

Просто к сведению: чтобы получить подсветку, используй css`...`.

Answer 1

[WbICHA]

Так никто и не ответил...
Я точно не помню, но точно не через require. Тебе нужно прописать путь строкой. Путь должен быть относительно папки public (это корневая папка для приложения).

Comments

[Alexander]

не уверен точно, но мне кажется require не работает в ts ибо ему нужен import для шрифтов, я решил это вот так

import styled, { createGlobalStyle } from 'styled-components'
import RobotoRegular from '../fonts/Roboto-Regular.ttf'
import UbuntuRegular from '../fonts/Ubuntu-Regular.ttf'

export const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'UbuntuRegular';
    src: url(${UbuntuRegular}) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }

  @font-face {
    font-family: 'RobotoRegular';
    src: url(${RobotoRegular}) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'UbuntuRegular';
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}

`

И добавил в католог файл fonts.d.ts, подключив его в tsconfig - include

declare module '*.eot'
declare module '*.woff'
declare module '*.ttf'

[WbICHA]

Alexander, хм, интересное решение, не подумал, что так можно. Но ладно, проблема решена.)