Need clafification on custom fonts

sage
1

Hi, i have a bunch of custom fonts, and have added them to my fonts folder.
All these fonts was origionally in my root folder then just got refrenced from my styles.
i have referenced them in my styles but im pretty sure my path is incorrect?
Can you help me confirm ;

fonts folder:

`$iconic-font-path: “./fonts/”;

@font-face {
font-family: “Iconic”;
src: url("#{$iconic-font-path}iconic-sm.eot");
src: url("#{$iconic-font-path}iconic-sm.eot?#iconic-sm") format(“embedded-opentype”), url("#{$iconic-font-path}iconic-sm.woff") format(“woff”), url("#{$iconic-font-path}iconic-sm.ttf") format(“truetype”), url("#{$iconic-font-path}iconic-sm.otf") format(“opentype”), url("#{$iconic-font-path}iconic-sm.svg#iconic-sm") format(“svg”);
font-weight: 400;
font-style: normal;
}`

referenced in styles:
@font-face {
font-family:‘Iconic’;
src: url(‘iconic-sm.eot’);
src: url(‘iconic-sm.eot?#iconic-sm’) format(‘embedded-opentype’), url(‘iconic-sm.woff’) format(‘woff’), url(‘iconic-sm.ttf’) format(‘truetype’), url(‘iconic-sm.otf’) format(‘opentype’), url(‘iconic-sm.svg#iconic-sm’) format(‘svg’);
font-weight: 400;
font-style: normal;
}

2

Remember when you compile your style sheet, your fonts will end up in /dist/fonts/ while your compiled CSS stylesheet will end up in /dist/css/. Your iconic-font-path would translate to /dist/css/fonts.

So you need your stylesheet to reference the fonts pointing to where they will end up.

Try:

$iconic-font-path: "../fonts/";

If that doesn’t work, here’s my method for setting up fonts which works for me.

  • Put your fonts & font-face stylesheet into /assets/fonts - make a subfolder if you like to keep stuff organised
  • In the font-face stylesheet, change “src” refs to point to the font files, relative to the location of the compiled CSS file in the /dist/ folder. Here’s a snippet from one of my stylesheets.
@font-face {
    font-family: 'playfair_display';
    src: url('../fonts/playfairdisplay-bold-webfont.eot');
    src: url('../fonts/playfairdisplay-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/playfairdisplay-bold-webfont.woff2') format('woff2'),
         url('../fonts/playfairdisplay-bold-webfont.woff') format('woff'),
         url('../fonts/playfairdisplay-bold-webfont.ttf') format('truetype'),
         url('../fonts/playfairdisplay-bold-webfont.svg#playfair_displaybold') format('svg');
    font-weight: bold;
    font-style: normal;

}
  • Put this somewhere early in main.scss so the font-face CSS files gets compiled into your final CSS sheet
@import '../../fonts/playfair-display/stylesheet';
  • Use your fonts in your SCSS sheets as needed
$myfont: 'playfair_display', Georgia, "Times New Roman", Times, serif;
%headline {font-family: $f1;  font-size: 3.5rem;}
  • Compile and enjoy :wine_glass:
5 Likes