[Question] Change theme font

[Mikerpen22]

Hi! Is there a way to modify the font to something like Avenir? Thank you:)

[MayMeow]

I changed font on my page articles to Input Mono Narrow, it wasn't that hard, you can check:

You can edit ./themes/hello-friend/assets/scss/_font.scss add there new font as follows

@font-face {
  font-family: 'Input Mono Narrow';
  font-style:  normal;
  font-display: auto;
  font-weight: 400;
  src: url("../fonts/InputMonoNarrow-Regular.woff2") format("woff2"),
       url("../fonts/InputMonoNarrow-Regular.woff") format("woff");
}

place your woff and woff2 fonts in ./themes/hello-friend/staic/fonts.

Then go to ./themes/hello-friend/assets/scss/_main.scss and update font-family in body directive like bellow This will change font for whole page.

font-family: "Input Mono Narrow", -apple-system, BlinkMacSystemFont, "Roboto",
    "Segoe UI", Helvetica, Arial, sans-serif;

if you want to change font for articles update ./themes/hello-friend/assets/scss/_single.scss and update &-content directive as follows.

&-content {
    margin-top: 30px;
    font-family: "Input Mono Narrow", -apple-system, BlinkMacSystemFont, "Roboto",
    "Segoe UI", Helvetica, Arial, sans-serif;
  }

This is easiest way how to do it (I know about). If there is someone who know easier method post it here ;)

If you don't want to edit theme, you can use custom css. Look at your site config.yml file and override those directives you need.

  # Integrate Javascript files or stylesheets by adding the url to the external assets or by
  # linking local files with their path relative to the static folder, e.g. "css/styles.css"
  customCSS = []
  customJS  = []