Changing a Font in an Jekyll Theme

Question

I have been experimenting with Jekyll a little bit the last days. I guess I understand the basics about it. I tested around 4 Templates and got them to run and understand the structures of a jekyll page. It isnt much magic tbh.

Today I came to the point where I wanted to change the font of my Template. I am using the Type on Strap Teamplate at the moment and you can see my repo I build on git pages Right here.

I checked out this post on stackoverflow . Which helped me to identify the _variables.scss file in the _sass/base folder. Also the thread goes on, saying that the whole file might be controlled through a scss file, mostly called like the theme. There we go, I found the Type-on-Strap in the _sass folder.

Now my question is: Do i have to edit the _variables.scss like I did below, and If so, where to I put the ttf files or how do i link correctly to the webfont ? Or will I leave the _variables files as it is and only have to edit the type-on-strap.scss file ? and if so again, what do I have to change ?

The _variable.scss file:

// Typography
$font-family-main: 'Source Sans Pro', Helvetica, Arial, sans-serif;
$font-family-headings: 'Source Sans Pro', Helvetica, Arial, sans-serif;
$font-family-logo: 'Source Sans Pro', Helvetica, Arial, sans-serif;
$font-size: 1.25em;

So I dont want to use Sans Pro anymore. I would like to use Barlow Semi Condensed as ther main font, and Barlow Semi Condensed Medium for the headings and logo. Would I change the code to this?:

$font-family-main: 'Barlow Semi Condensed', sans-serif;
$font-family-headings: 'Barlow Semi Condensed', sans-serif;
$font-family-logo: 'Barlow Semi Condensed', sans-serif;

Summary: I only want to know, what do I have to edit how to get Barlow font to replace the sans pro one on my template I am using.

Hope people arent too mad about me making another post about this. I crawler through some of the answers and this is day two in trying. Kind of getting exhausted :)

Thanks in advance!

Answer 1

Hey thanks for using the theme. I see two solutions for your problem

1. If you are not familiar with sass, there are often the possibility to import directly the css of your font in the head.html . Try looking for an "embedded" version.

For this font you could just add this line in your header, and modify the _variable.scss as you did for it to work.

<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet"> 

2. if you want to manually add your font with sass/scss, there's no magic, you will need to:

   • download the fonts and put them in /fonts mind the naming, you'll need it.
   • Check out how it was done for " Source Sans Pro " in _sass/external/_source-sans-pro.scss . Add a new file like BarlowSemiCondensed.scss with all the right information.
   • Create a @font-face for the font you'll be using.(Usually what you get when you download the font, just copy those files).
   • Don't forget to import any new .scss file in type-on-strap.scss