Sapper: Font-face not working

Created on 23 Apr 2020  路  2Comments  路  Source: sveltejs/sapper

Font-face not woking a custom font on sapper?
Font is loaded, but not show..

`@font-face {
font-family: Baske;
src: url("fonts/BASKE1.ttf") format('truetype');
}

body {
    font-family: Baske, Arial !important;
}`

Most helpful comment

Just a comment on that, to help anyone that got stuck (me) trying to figure out how to use locally hosted fonts.

In the context of @font-face in an css, scss, sass file. Toke me a while to figure out that in the src: url(): fonts/ or ./fonts/ will not work because it will be resolved relative to client.js and not to static folder defined in server.js. To make it work just do /fonts/ and it will be resolved to the static folder.

  • :thumbsdown: ./path/to/myfont
  • :thumbsdown: path/to/myfont
  • :thumbsup: /path/to/myfont

All 2 comments

Please follow the issue template and provide a repro.

Just a comment on that, to help anyone that got stuck (me) trying to figure out how to use locally hosted fonts.

In the context of @font-face in an css, scss, sass file. Toke me a while to figure out that in the src: url(): fonts/ or ./fonts/ will not work because it will be resolved relative to client.js and not to static folder defined in server.js. To make it work just do /fonts/ and it will be resolved to the static folder.

  • :thumbsdown: ./path/to/myfont
  • :thumbsdown: path/to/myfont
  • :thumbsup: /path/to/myfont
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Rich-Harris picture Rich-Harris  路  4Comments

antony picture antony  路  3Comments

UnwrittenFun picture UnwrittenFun  路  4Comments

matt3224 picture matt3224  路  4Comments

nikku picture nikku  路  4Comments