I would like to use Inter as a global font for entire application. I'm using React, Typescript and Styled component. The font is downloaded from fontsquirrel service and is loaded in globalStyles file.
On Firefox I have following error. I don't think that the files are somehow corrupted.
downloadable font: rejected by sanitizer (font-family: "Inter" style:normal weight:400 stretch:100 src index:0) source: http://localhost:3000/fonts/Inter-Regular.ttf
On Chrome
Failed to decode downloaded font: http://localhost:3000/fonts/Inter-Regular.ttf
Global styles file which is used in root react file.
import { createGlobalStyle } from 'styled-components';
export const GlobalStyle = createGlobalStyle`
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-Bold.ttf') format("truetype");
}
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-Medium.ttf') format("truetype");
}
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-Regular.ttf') format("truetype");
}
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
`;