score:10

Accepted answer

font-family: Segoe Pro Regular; isn't a valid syntax, you should try:

font-family: 'Segoe Pro Regular';

Here is a working example for reference:

import React from 'react';
import ReactDOM from 'react-dom';
import { createGlobalStyle } from 'styled-components';
import MajorMonoTTF from './MajorMonoDisplay-Regular.ttf';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'Major Mono Display';
    src: url(${MajorMonoTTF}) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: auto;
  }
  h1 {
    font-family: 'Major Mono Display';
  }
`;

const App = () => (
  <>
    <GlobalStyle />
    <h1>Cool Title</h1>
  </>
);

ReactDOM.render(<App />, document.getElementById('root'));

Edit Q-58787035-FontFamily


Related Query

More Query from same tag