cssjekylljekyll-theme

Changing the font in Jekyll Minima (default) theme


I've started experimenting with Jekyll a little bit, and looking at how it works. So far it's a bit confusing.

First of all, the minima theme properties are bundled in a gem, and are hidden from initial view. So I've copied over minima-2.5.0/_sass/minima.scss to my created project directory, which is supposed to override the default config.

Inside that variabe file, I see the following main font variable:

$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

I'm too scared to touch that. How would I change the default font in my Jekyll site? Why is there so many of them defined here, and how do they take precedence over one-another?

What if I want to use a local Ubuntu font, like Ubuntu mono? What if I want to use Inconsolata or another font from googlefonts?


Solution

  • Local fonts will not display consistently, as people might not have/installed them. You can use a free font hosted by Google (which people seem to call 'Google Fonts'). If you want to use Ubuntu Mono, use this:

    $base-font-family: 'Ubuntu Mono', monospace;
    

    And add this to your head:

    <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet"> 
    

    A better solution is to download the font, using a download helper.

    IMPORTANT NOTE - Putting your company name above something released for free to the community is uncool (Google Fonts). Using this to create a 'free service' to track the behavior of people online is even more uncool. Most people call this stealing (plagiary) and snooping. We tell our kids that this is bad. We (as web developers) should not facilitate this. We should NOT feed Google Fonts to our visitors. Just download these free fonts and serve them from your web server. They (should) have nothing to do with Google. If you own any fonts, please prevent Google from hosting them. Stop facilitating mass surveillance. Thank you.