reactjs - hur man använder lokala typsnitt med styled components och react typescript

Jag skapar ett komponentbibliotek med Reactjs, TypeScript och Styled-components. Saken är den att jag vet att jag kan använda createGlobalStyle enligt dokumentationen, men jag har ingen app, det är bara en enda komponent (använder även Storybook), så jag är inte säker på om jag missar något eller hur jag kan använda font-face utan att behöva omsluta min app med <GlobalStyle />.

Jag försökte men det fungerade inte

export const fonts = {
    fontSource: './fonts/fontname.woff',
    fontFamily: 'fontname',
}

//component.tsx
import { fonts, GlobalStyle } from '../../theme'

export const Component = styled.div<MyComponent>`
    font-family: ${fonts.fontFamily};

Svar #1

Innan du kan använda typsnitten måste du lägga till dem antingen genom att använda @font-face eller genom att hosta ditt typsnitt.

Denna referens kommer att hjälpa dig https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project.

När du har gjort det kan du hänvisa till ditt typsnitt i din CSS med det font-family-värde som du satte när du lade till ditt typsnitt med @font-face eller ett hostat typsnitt.

Relaterade artiklar