Importing a font family

I am trying to import and use a local font (OTF) file not inside of my project but in a Added UI Resource module that i've added. So what i am trying to create is a resource module, which i can export to the marketplace and reuse for other apps. How over when i try to import the file i get a 404. The contents om the UI Resource module main.scss: ‘ @import '../../../theme/web/custom-variables'; @import url("./fonts/open-sans.css"); I've added a folder (as suggested in the example) but not in ‘/theme/web/fonts/’ but in the added Resource module: ‘themesource\stylingmodule\web\fonts\font.css’ The contents of that css file is: @font-face { font-family: 'myfont'; src: local('myfont'), url('./myfont.otf') format('opentype'); } in the same location as the font.css is the myfont.otf located. I am not able to make this work using the online examples. 
1 answers

Hi Samantha,


You should create a ‘public’ folder in the themesource folder, 'themesource/{RESOURCE_MODULE}/public’. Everything you place inside this folder will be deployed to the root of the deployment folder. Thus, if you create a 'fonts’ folder here and place the font in it, you will be able to access the font in your SCSS file through:


@font-face {
  font-family: 'myfont';
  src: url("./fonts/myfont.otf");


Hope this helps :)


Regards, Jeroen