Skip to main content

Fonts

There is a folder called fonts where you can add any font that you need.

CDN Approach​

Add it directly to ~styles/fonts/_fonts.scss;

// CDN approach
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

Downloaded Font​

Download the font, generate a folder inside ~assets/styles/fonts/[font-name] with the name of the font and add the font-face in ~assets/styles/fonts/_fonts.scss; (It's preferrable for font files to go through the build pipeline, see: https://stackoverflow.com/questions/41676054/how-to-add-fonts-to-create-react-app-based-projects)

// Downloaded font
@font-face {
  font-family: 'Open Sans';
  src: url('./OpenSans/OpenSans-Regular-webfont.woff2') format('woff2'), url('./OpenSans/OpenSans-Regular-webfont.woff')
      format('woff');
}

Custom Font​

Use a tool like ico-moon to generate your custom font. Download it. Generate the folder for the font in ~public/fonts. Use the variables generated by ico-moon so you can get your ico-moon font up to date in each change that is required.

@import 'variables';

@font-face {
  font-family: '#{$icomoon-font-family}';
  src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?h3r6i4');
  src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?h3r6i4#iefix') format('embedded-opentype'), url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?h3r6i4')
      format('truetype'), url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?h3r6i4') format('woff'), url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?h3r6i4##{$icomoon-font-family}')
      format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}