CODEWITHSUNDEEP
reactjstypescriptfontsfont-face
thinkmore
thinkmore

Reputation: 239

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]

Upvotes: 1

Views: 5593

Answers (4)

anithaG
anithaG

Reputation: 26

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

Upvotes: 1

pullidea-dev
pullidea-dev

Reputation: 1803

Check if you installed the file-loader.

npm i -D file-loader

Upvotes: 0

Roshan Tajpuriya
Roshan Tajpuriya

Reputation: 1

Did you tried by creating rules in the webpack?

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff2|woff|eot|ttf|otf)$/,
        use: ["file-loader"],
      },
    ],
  },
}

Upvotes: 0

Karthik R
Karthik R

Reputation: 5786

Can you try altering the globals font face as below?

export const GlobalFonts = createGlobalStyle`
  @font-face {
    font-family: TrixiePlain;
    // rest of declaration
  }
`

Note above the font-family value without space/quotes. Thus, in styled components:

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

Upvotes: 0

Related Questions