HUGO

Link a font-face in a .scss to the right folder

I want to link my font-face in a .scss file to font in a local folder.
I dont know where to put the fonts: in the assets folder at the roout of the project (like my sccs files) or in the resources folder?
And how to link it: with relative/absolute path or with a resource.Get?

static/
ā””ā”€ā”€ fonts/
    ā”œā”€ā”€ happy-monkey-v9-latin-regular.eot
    ā”œā”€ā”€ happy-monkey-v9-latin-regular.svg
    ā”œā”€ā”€ happy-monkey-v9-latin-regular.ttf
    ā”œā”€ā”€ happy-monkey-v9-latin-regular.woff
    ā””ā”€ā”€ happy-monkey-v9-latin-regular.woff2

assets/scss/main.scss

@font-face {
  font-family: "Happy Monkey";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/happy-monkey-v9-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("/fonts/happy-monkey-v9-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("/fonts/happy-monkey-v9-latin-regular.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("/fonts/happy-monkey-v9-latin-regular.woff") format("woff"),
    /* Modern Browsers */ url("/fonts/happy-monkey-v9-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("/fonts/happy-monkey-v9-latin-regular.svg#HappyMonkey") format("svg"); /* Legacy iOS */
}

body {
  font-family: "Happy Monkey";
}

layouts/_default/baseof.html

{{ $css := resources.Get "scss/main.scss" | toCSS (dict "targetPath" "styles.css") | minify }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
1 Like

thanks jmooring

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.