Search code examples
reactjstypescriptfontsfont-face

custom font is loaded but not applying in react typescript

I've developing react typescript project and trying to load custom font. But I can see font is loaded in Network tab but font is still not changed to what I want. I tried many related post in StackOverflow but still the same. The last I did is this link. Here's my current code I added for font.

assets/fonts/globalfonts.ts

import { url } from 'inspector';
import {createGlobalStyle} from 'styled-components';

export const GlobalFonts = createGlobalStyle`
  @font-face {
    font-family: 'Trixie Plain';
    font-style: normal;
    font-weight: 400;
    src: url("./assets/fonts/Trixie-Plain.otf") format('opentype')
  }
`

src/components/TopBar/components/Nav.tsx

import React from 'react'
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'
import { GlobalFonts } from '../../../assets/fonts/globalfonts'

const Nav: React.FC = () => {
  return (
    <StyledNav>
      <GlobalFonts />
      <StyledLink exact activeClassName="active" to="/">
        Home
      </StyledLink>
    </StyledNav>
  )
}

const StyledNav = styled.nav`
  align-items: center;
  display: flex;
  font-family: 'Trixie Plain';
`

enter image description here

[css][1]

Solution

  • You need to define a declaration file d.ts as mentioned in the https://dev.to/anteronunes/comment/171a3