How can I add custom local font to Jekyll site?

Question

I have a custom icon font exported from Icomoon, and I'm trying to figure out how to incorporate it into my Jekyll site (I'm a bit new to Jekyll!) I've added the directory exported from Icomoon in my assets folder, and I've included the line:

@include embed-font ("Icomoon", "../assets/fonts/font/icomoon.ttf");

in my CSS, and added in my config file:

assets:
   sources:
       -_assets/fonts

but I get an error message saying: "undefined mixin 'embed-font' on line 2 of my CSS.

Does anyone know the steps I can take to integrate this correctly? Or have any resources/tutorials for this?? I feel really lost.

Answer 1

1. Download the custom set of icons (icomoon.zip) and extract to some relative location.
2. Copy 'icomoon/fonts/*' files to 'your-project-name/assets/fonts/*'.
3. Move 'icomoon/style.css' to 'your-project-name/_sass/custom-icons.scss'; note the .scss extension.
4. Open the '_sass/custom-icons.scss' file.

5. Change all the url paths by prepending ../font before the font/icomoon.* The - * represents all extension names here.

   Example
   • url('fonts/icomoon.eot?fscaxe');
   • url('../fonts/icomoon.eot?fscaxe');

6. Add the relative @import 'custom-icons'; to the main .scss file(s) to include the icons.

7. Remember the semi-colon at end of the @import 'custom-icons'; statement.

Answer 2

Instead of using @include, try @font-face instead like this:

@font-face {
  font-family: "Icomoon";
  src: url("../assets/fonts/font/icomoon.tff");
}

Reference: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts