Theme Colors and Fonts

We uses variables for typical global theme settings, such as colors and fonts. It’s easy to change the theme to your brand color and typography.

You can edit these variables in the _config.yml

Colors

You can edit the main theme colors in the _config.yml

# _config.yml

colors:
  #light-mode colors
  primary_bg: "#EC255A"
  primary_bg_2: "#eed2d9"
  primary_text: "#f9fafb"
  base_bg: "#ffffff"
  base_bg_2: "#ebeef0"
  base_bg_3: "#f1f3f4"
  base_text: "#191a1a"
  base_text_2: "#555555"
  logo_text: "#191a1a"
  header_text: "#191a1a"

  # dark-mode colors
  primary_bg_dark: "#EC255A"
  primary_bg_2_dark: "#eed2d9"
  primary_text_dark: "#f9fafb"
  base_bg_dark: "#121418"
  base_bg_2_dark: "#1d2026"
  base_bg_3_dark: "#24272d"
  base_text_dark: "#F4F4F5"
  base_text_2_dark: "#D1D5DB"
  logo_text_dark: "#F4F4F5"
  header_text_dark: "#F4F4F5"

Fonts

This theme supports both self hosted fonts and Google fonts. By default it is configured to use self hosted fonts. This theme uses Google Fonts. If you want to use different fonts, visit the Google fonts website, select your fonts, then copy and paste the <link> code snippet into the google_fonts field in the _config.yml. Below this field update the heading, base and monospace fields with the name of the new font.

# _config.yml

fonts:
  use_google_fonts: false # if true will use external google_fonts url below
  google_fonts_url: "https://fonts.googleapis.com/css2?&family=Schibsted+Grotesk:wght@400;500&family=Open+Sans:wght@300;400;500;600;700&family=Fira+Mono&display=swap"
  use_self_hosted_fonts: true # font files must be placed in /assets/fonts folder and the @font-face definitions must be added to /assets/css/fonts.css
  heading: "Schibsted Grotesk"
  base: "Open Sans"
  monospace: "Fira Mono"
  logo: "Schibsted Grotesk"

External Google Fonts

Google fonts are more convienent and easier to update.

Set use_google_fonts: true and use_self_hosted_fonts: false. Then update google_fonts with the URL that is generted by the google fonts website

In the screenshot below you can see we have selected 3 fonts with the various fonts weights we need. This generates the embed code on the right. We need to just copy the URL starting from https: - which in this example is "https://fonts.googleapis.com/css2?family=Fira+Mono&family=Montserrat:wght@400;500&family=Open+Sans:wght@300;400;500;600;700&display=swap"

We could then use any of these fonts, “Montserrat”, “Open Sans” and “Fira Mono”.

In the updated _config.yaml below we’ve updated the Heading and Logo fonts to use “Montserrat” a slightly more traditional serif font.

# _config.yml

  use_google_fonts: true # if true will use external google_fonts url below
  google_fonts_url: "https://fonts.googleapis.com/css2?family=Fira+Mono&family=Montserrat:wght@400;500&family=Open+Sans:wght@300;400;500;600;700&display=swap"
  use_self_hosted_fonts: false # font files must be placed in /assets/fonts folder and the @font-face definitions must be added to /assets/css/fonts.css
  heading: "Montserrat"
  base: "Open Sans"
  monospace: "Fira Mono"
  logo: "Montserrat"

Self Hosted Fonts

Self hosted fonts are privacy friendly and arguably may be faster to serve.

Updating your own fonts can be difficult, as it involves finding and installing web ready font files. It also involves generating @font-face definitions and adding them to the CSS files. We do not actively support troubleshooting self hosted fonts, sorry.

To update the fonts,

We used https://gwfh.mranftl.com/fonts to download Google Fonts and also generate the @font-face defintiions. But this is just one way of doing it, and you may still need to tweak the code it generates!

Add the new font files to assets/fonts/- you will be able to see the existing installed fonts here and hopefully use them as a reference.

For example you might add assets/fonts/montserrat/montserrat-v26-latin-regular.woff2

Edit assets/css/fonts.css and add the new @font-face defintions. They will look something like this

/* assets/css/fonts.css */

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat/montserrat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

Its important to get the src property correct, it should be a relative path to where you installed the actual font files. In the case of the example above we installed them at assets/fonts/montserrat/montserrat-v26-latin-regular.woff2

Now these fonts will be available in the _config.yml

# _config.yml

  use_google_fonts: false
  google_fonts_url: ""
  use_self_hosted_fonts: true 
  heading: "Montserrat"
  base: "Open Sans"
  monospace: "Fira Mono"
  logo: "Montserrat"