How to import and use local fonts

[unknown075]

I have added the TPHero font in public folder and @font-face (refer to this old commit) but it does not seem to work.

Could you please help?

// webpack
{
  test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
  loader: 'file-loader',
  query: {
    name: isDebug ? '[path][name].[ext]?[hash:8]' : '[hash:8].[ext]',
  },
},

// in variable.css

@font-face {
  font-family: 'TPHero';
  font-style: normal;
  font-weight: normal;
  src:
    url('../../../public/fonts/TPHero/TPHero-Bold.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-BoldItalic.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-ExtraBold.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-ExtraBoldItalic.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-Hairline.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-HairlineItalic.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-Light.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-LightItalic.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-Medium.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-MediumItalic.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-Regular.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-RegularItalic.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-SemiBold.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-SemiBoldItalic.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-Super.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-Thin.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-ThinItalic.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-UltraLight.otf') format('otf'),
    url('../../../public/fonts/TPHero/TPHero-UltraLightItalic.otf') format('otf');
}

[frenzzy]

You should not put to variables.css anything except variables, otherwise the code will be duplicated multiple times - depends on how many @imports of the variables.css file do you have.

The best place for custom fonts is your top level react component (src/components/Layout/Layout.css in RSK).

Then you need to define @font-face for each font separately. For example light, italic, bold etc. are different fonts. Also it is not recommended to import more than 2-3 fonts per page - it it too heavy.

About path to fonts, you can use the same modular/component approach here, just put them to the components folder and use relative path in url(./fonts/font-name.ext), but if you want save font-file name on production, put them to public/fonts/font-name.ext folder and use absolute path in css url(/fonts/font-name.ext).

Example:

/src/component/Layout/
├── /fonts/
│   ├── /Roboto-Regular.woff2
│   ├── /Roboto-Regular.woff
│   ├── /Roboto-Bold.woff2
│   └── /Roboto-Bold.woff
├── Layout.css
├── Layout.js
└── package.json

/* src/components/Layout/Layout.css */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src:
    local('Roboto'),
    local('Roboto-Regular'),
    url(./fonts/Roboto-Regular.woff2) format('woff2'),
    url(./fonts/Roboto-Regular.woff) format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src:
    local('Roboto Bold'),
    local('Roboto-Bold'),
    url(./fonts/Roboto-Bold.woff2) format('woff2'),
    url(./fonts/Roboto-Bold.woff) format('woff');
}

html {
  font-family: 'Roboto', sans-serif;
}

/* ... */

[unknown075]

@frenzzy thank you so much for your help.

It still does not work, I followed your steps (font paths + declaration) as:

@font-face {
  font-family: 'TPHero';
  font-style: normal;
  font-weight: bold;
  src:
    local('TPHero Bold'),
    local('TPHero-Bold'),
    url(./fonts/TPHero-Bold.otf) format('otf');
}

@font-face {
  font-family: 'TPHero';
  font-style: italic;
  font-weight: normal;
  src:
    local('TPHero MediumItalic'),
    local('TPHero-MediumItalic'),
    url(./fonts/TPHero-MediumItalic.otf) format('otf');
}

@font-face {
  font-family: 'TPHero';
  font-style: italic;
  font-weight: 600;
  src:
    local('TPHero SemiBoldItalic'),
    local('TPHero-SemiBoldItalic'),
    url(./fonts/TPHero-SemiBoldItalic.otf) format('otf');
}

But there is no effect when I try to use it like:

.p {
  font-family: 'TPHero-Bold';
  color: #333;
  text-align: center;
}

Do you have any idea about where it could come from ?

[frenzzy]

.otf is format('opentype'), demo

[unknown075]

Thank you so much.

[damiangreen]

Is that additional webpack config section required @unknown075 ?
I'm struggling to get this working. It appears that 'file-loader' is the fallback loader