Recommended way to change fonts

[ecommerce-technician]

Fonts are non-standard to change

I want to use. a custom local font. When I bring it in as a font-face in CSS it isnt working

Your environment

• Mac Catalina
• Chrome 85
• Node 14.9, npm 6.14

Steps to reproduce

Look for documentation about replacing a font

Fail in finding said documentation

Create a fonts/ >> Your Font << / >> Your Font >> .otf

in index.css

@font-face {
  font-family: 'SigmaFive';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/sigma_five/SigmaFive.otf'),
  format('opentype')
}

Expected behavior

The font shows up

Actual behavior

The font does not show up

[romelperez]

Hi @ecommerce-technician !

You can setup the theme typography by passing the following theme props: https://github.com/arwes/arwes/blob/version1-breakpoint1/src/tools/createTheme/theme.js#L67-L68 like this:

const myTheme = {
  typography: {
    headerFontFamily: '"Electrolize", "sans-serif"',
    fontFamily: '"Titillium Web", "sans-serif"'
  }
};

const App = () => (
  <ThemeProvider theme={createTheme(myTheme)}>
    ...
  </ThemeProvider>
);

You can set the font families as if they are coming from a CDN like Google Fonts or locally installed.

[ecommerce-technician]

Awesome, thanks!