How to Change Fonts in this Website Template

The choice of fonts is one of the most essential design decisions for a website. The font should amplify and underline the subject at hand. There are many free sources for fonts in the internet, e.g. FontSquirrel, Dafont, 1001 free fonts and many more. However, the most prominent one is probably Google fonts.

This site employs two Google fonts, namely, Montserrat and Dosis. If you want to use a different font for your site, you can easily achieve this by doing the following:

1. Choose the font you like from Google fonts. Say this is Roboto and that you want to replace Dosis with Roboto.

2. Install the desired font from npm. As explained in https://github.com/KyleAMathews/typefaces, you need to add the font name after typeface-, e.g.:

   npm install --save typeface-roboto

3. Now, import the new typeface into your <Layout />-component, e.g.:

   import "typeface-roboto"

   Don’t forget to delete:

   import "typeface-dosis"

4. Then open src/utils/typography.js where you can enter Roboto as your default font with its CSS-name into the JavaScript object typography:

   const typography = new Typography({
     baseFontSize: "18px",
     baseLineHeight: 1.5,
     headerFontFamily: ["Montserrat", "serif"],
     bodyFontFamily: ["Roboto", "serif"],
   })