csssassmarkdownjekyllgoogle-font-api

How do I add a Google font to a jekyll theme

I have a simple jekyll website using the minima theme. Here is what the site's simple index.md file looks like:

---
layout: home
---
# A Simple site for testing stuff

The next two lines should be in different fonts
* This bullet point is in the default minima font. The next point should be in Google Gentium Basic web font
* <span class="nkonya">Nɔ́pʋ Gugɛl Gyɛntiam Besɩk wɛbfɔnt wanlɩn ɩ́nɩ.</span>

This is on the Home Page.

I don't know enough about jekyll and css/sass/scss to make the magic happen so that the Gentium Basic font from the Google API would apply to the code that I've marked with <span>...</span>.

If there's a better solution than using a <span class...> marker, that would be fine.

Most of the answers I've found involve replacing the base font. I don't want to do that, just add a font and have a reasonably simple way to apply that font.

Solution

  • It's very easy. You need to override the head.html file in _includes. If you haven't done so, copy it from the minima theme repository here https://github.com/jekyll/minima/blob/master/_includes/head.html and add the following line beween <head> and </head:

      <!-- fonts -->
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Arvo">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">

    changing Arvo and Raleway with the fonts you choose of course.

    Then you need to override the CSS. You can create a css/override.css file and add your fonts to the styling, for example the following will use Raleway by default, and Arvo for all headings and all elements with class .site-title and .site-nav. To use fonts in specific elements you need to learn a little about CSS but nothing you couldn't easily google.

    body {
  font-family: 'Raleway', serif;
  }

h1, h2, h3, h4, h5, .site-title, .site-nav {
  font-family: 'Arvo', sans-serif;
}

    Then you have to load this CSS. Go back to your head.html file and include this line inside the <head> tag after any other CSS style you find referenced there (the order in which the files are loaded matters)

    <link rel="stylesheet" href="{{ site.baseurl }}/css/override.css" />