Блог

Я пытаюсь импортировать локальный шрифт в свой проект React/Typescript.

Файл шрифта, Averta-Cyrillic_Regular.otf , помещается в src/assets/fonts/ папку.

В той же папке находится fonts.d.ts файл всего с одной строкой:

 declare module '*.otf'
 

И в моем tsconfig.json файле есть следующее правило включения:

 "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 

Таким образом, технически он должен иметь возможность импортировать нормально?

Однако, когда я пытаюсь импортировать шрифт, src/assets/fonts/fonts.ts как показано ниже:

 import { createGlobalStyle } from 'styled-components'

import AvertaCyrillicRegular from './Averta-Cyrillic_Regular.otf'

export default createGlobalStyle`
    @font-face {
        font-family: 'Averta Cyrillic Regular';
        src: local('Averta Cyrillic Regular'), local('AvertaCyrillicRegular'),
        url(${AvertaCyrillicRegular}) format('otf'),
        font-weight: 300;
        font-style: normal;
    },
`
 

Это приводит к следующей ошибке:

 Cannot find module './Averta-Cyrillic_Regular.otf' or its corresponding type declarations.  TS2307

    1 | import { createGlobalStyle } from 'styled-components'
    2 |
  > 3 | import AvertaCyrillicRegular from './Averta-Cyrillic_Regular.otf'
 

Просто добавьте объявление в файл .d.ts нашего проекта с расширением файлов шрифтов.

declare module "*.woff2"