Using @font-face override in theme

Share
1

As a complete Jekyll noob, I am not sure if this is the “official” way to do this but it works.

I wanted to use a custom font in the Minima theme. The customization instructions here, while really good, don’t directly cover doing that.

So:

  1. Create an assets/fonts folder and copy your font files in there. If you want more than one font, create a sub folder for each one.

  2. Create an assets/main.scss file with the following (note the front matter dashes):

    —
    —

    /* Add your @font-face setting the url path */
    @font-face {
    font-family:“Open Sans”;
    src: url("…/assets/fonts/OpenSans-Regular-webfont.eot");
    src: url("…/assets/fonts/OpenSans-Regular-webfont.eot?#iefix") format(‘embedded-opentype’),
    url("…/assets/fonts/OpenSans-Regular-webfont.woff") format(‘woff’),
    url("…/assets/fonts/OpenSans-Regular-webfont.tff") format(‘truetype’),
    url("…/assets/fonts/OpenSans-Regular-webfont.svg#glyphicons-halflingsregular’") format(‘svg’);
    }

    /*
    Set the sass variables. You only need the $base-font-family here but in case you want to adjust sizes etc…
    For reference, in the Minima theme gem folder, these are in /_sass/minima.scss
    */
    $base-font-family: “Open Sans” !default;
    $base-font-size: 16px !default;
    $base-font-weight: 400 !default;

    /* import the theme css */
    @import “{{ site.theme }}”;

    /* FYI: unrelated to the font-face customisation, make any other css overrides here. eg: */
    body {
    color: rgb(88, 60, 153);
    }

    .site-header {
    border-top:none;
    }

Just change to your font name and hopefully it will work for you too.

Cheers,
Murray