Cannot enable local fonts

[shaal]

Issue

Cannot enable local fonts, using master branch, v10.4.2

Steps to reproduce

Comment out -

particle/source/default/tokens/sass/printing/_type.scss

Line 18 in 99067bb

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Oswald|Source+Code+Pro&display=swap');

Uncomment -

particle/source/default/tokens/sass/printing/_type.scss

Lines 26 to 32 in 99067bb

	//@font-face {
	// font-family: 'Oswald';
	// font-style: normal;
	// font-weight: 400;
	// src: local('Oswald Regular'), local('Oswald-Regular'), url(../fonts/Oswald-Medium.ttf) format('truetype');
	// unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	//}

Change this line -

particle/source/default/tokens/sass/non-printing/_bootstrap-overrides.scss

Line 91 in 99067bb

$font-family-base: $font-family-sans-serif;

to -
$font-family-base: $font-family-serif;

Run:
npm run setup
npm start

Error:

> [email protected] start /home/shaal/code/test/particle
> npm run dev:pl-node


> [email protected] dev:pl-node /home/shaal/code/test/particle
> cross-env-shell NODE_ENV=development "npm run pl-node & webpack-dev-server --config ./apps/node-pl/webpack.config.js --hot"


> [email protected] pl-node /home/shaal/code/test/particle
> node ./apps/node-pl/pl-app.js

Pattern Lab Node v3.0.1 development compile START!
ℹ ｢wds｣: Project is running at http://0.0.0.0:8080/
ℹ ｢wds｣: webpack output is served from /app-node-pl/assets/
ℹ ｢wds｣: Content not from webpack is served from /home/shaal/code/test/particle/dist/
ℹ ｢wds｣: 404s will fallback to /index.html
31% building 182/200 modules 18 active .../shaal/code/test/particle/source/default/_meta/_00-head.twigℹ ｢wdm｣: wait until bundle finished: /app-node-pl/assets/astrogoat.png
ℹ ｢wdm｣: wait until bundle finished: /app-node-pl/assets/app.js?cacheBuster=1368581662
67% building 645/678 modules 33 active ...lt/clientside/vue-widget/src/vue-cards/components/banner.vueℹ ｢wdm｣: wait until bundle finished: /app-node-pl/assets/app.js?cacheBuster=1244377455
✖ ｢wdm｣: Hash: 95971fb8d3f3004d993a
Version: webpack 4.39.2
Time: 28681ms
Built at: 08/27/2019 11:31:33 PM
PublicPath: app-node-pl/assets/
                                         Asset       Size     Chunks             Chunk Names
                                        app.js   5.26 MiB        app  [emitted]  app
astrogoat.png?509cc5d67989f20c4be6bacde5718a9b   17.3 KiB             [emitted]  
     logo.svg?35d56001f631f256cac5758fa7655b6c  503 bytes             [emitted]  
                                 spritemap.svg   1.91 KiB  spritemap  [emitted]  spritemap
Entrypoint app = app.js

ERROR in ./source/default/tokens/sass/tokens.scss (./node_modules/css-loader/dist/cjs.js??ref--1-2!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--1-4!./node_modules/sass-loader/lib/loader.js??ref--1-5!./source/default/tokens/sass/tokens.scss)
Module not found: Error: Can't resolve './fonts/Oswald-Medium.ttf' in '/home/shaal/code/test/particle/source/default/tokens/sass'
resolve './fonts/Oswald-Medium.ttf' in '/home/shaal/code/test/particle/source/default/tokens/sass'
  using description file: /home/shaal/code/test/particle/package.json (relative path: ./source/default/tokens/sass)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/shaal/code/test/particle/package.json (relative path: ./source/default/tokens/sass/fonts/Oswald-Medium.ttf)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.json doesn't exist
      as directory
        /home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf doesn't exist
[/home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf]
[/home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.wasm]
[/home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.mjs]
[/home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.js]
[/home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.json]
 @ ./source/default/tokens/sass/tokens.scss (./node_modules/css-loader/dist/cjs.js??ref--1-2!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--1-4!./node_modules/sass-loader/lib/loader.js??ref--1-5!./source/default/tokens/sass/tokens.scss) 4:38-74
 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--1-2!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--1-4!./node_modules/sass-loader/lib/loader.js??ref--1-5!./source/default/tokens/sass/tokens.scss
 @ ./source/default/tokens/sass/tokens.scss
 @ ./source/default/_patterns/00-protons/index.js
 @ ./source/default/_patterns/05-pages/demo/index.js
 @ ./source/default/_patterns sync demo$
 @ ./apps/node-pl/glob.js
 @ ./apps/node-pl/index.js
 @ multi ./apps/node-pl/index.js ./node_modules/svg-spritemap-webpack-plugin/svg4everybody-helper.js
ℹ ｢wdm｣: Failed to compile.
ℹ ｢wdm｣: Compiling...
✖ ｢wdm｣: Hash: 95971fb8d3f3004d993a
Version: webpack 4.39.2
Time: 892ms
Built at: 08/27/2019 11:31:35 PM
PublicPath: app-node-pl/assets/
                                         Asset       Size     Chunks             Chunk Names
                                        app.js   5.26 MiB        app             app
astrogoat.png?509cc5d67989f20c4be6bacde5718a9b   17.3 KiB                        
     logo.svg?35d56001f631f256cac5758fa7655b6c  503 bytes                        
                                 spritemap.svg   1.91 KiB  spritemap  [emitted]  spritemap
Entrypoint app = app.js

ERROR in ./source/default/tokens/sass/tokens.scss (./node_modules/css-loader/dist/cjs.js??ref--1-2!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--1-4!./node_modules/sass-loader/lib/loader.js??ref--1-5!./source/default/tokens/sass/tokens.scss)
Module not found: Error: Can't resolve './fonts/Oswald-Medium.ttf' in '/home/shaal/code/test/particle/source/default/tokens/sass'
resolve './fonts/Oswald-Medium.ttf' in '/home/shaal/code/test/particle/source/default/tokens/sass'
  using description file: /home/shaal/code/test/particle/package.json (relative path: ./source/default/tokens/sass)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/shaal/code/test/particle/package.json (relative path: ./source/default/tokens/sass/fonts/Oswald-Medium.ttf)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.json doesn't exist
      as directory
        /home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf doesn't exist
[/home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf]
[/home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.wasm]
[/home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.mjs]
[/home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.js]
[/home/shaal/code/test/particle/source/default/tokens/sass/fonts/Oswald-Medium.ttf.json]
 @ ./source/default/tokens/sass/tokens.scss (./node_modules/css-loader/dist/cjs.js??ref--1-2!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--1-4!./node_modules/sass-loader/lib/loader.js??ref--1-5!./source/default/tokens/sass/tokens.scss) 4:38-74
 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--1-2!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--1-4!./node_modules/sass-loader/lib/loader.js??ref--1-5!./source/default/tokens/sass/tokens.scss
 @ ./source/default/tokens/sass/tokens.scss
 @ ./source/default/_patterns/00-protons/index.js
 @ ./source/default/_patterns/01-atoms/alert/index.js
 @ ./source/default/_patterns sync ^\.\/(01-atoms|02-molecules|03-organisms)\/[\w-]+$
 @ ./source/default/index.js
 @ ./apps/node-pl/index.js
 @ multi ./apps/node-pl/index.js ./node_modules/svg-spritemap-webpack-plugin/svg4everybody-helper.js
ℹ ｢wdm｣: Failed to compile.

Not sure if this is part of the solution,
Change this line -

particle/source/default/tokens/sass/printing/_type.scss

Line 30 in 99067bb

// src: local('Oswald Regular'), local('Oswald-Regular'), url(../fonts/Oswald-Medium.ttf) format('truetype');

to -
src: local('Oswald Regular'), local('Oswald-Regular'), url(../../fonts/Oswald-Medium.ttf) format('truetype');

Run:
npm run setup
npm start

Now it compiles with no errors,
Checking the network tab when loading a component page in PL, the font file was not loaded :(
It tries loading it from the wrong location -
http://0.0.0.0:8080/app-node-pl/pl/patterns/02-molecules-card-demo-cards/app-node-pl/assets/fonts/Oswald-Medium.ttf

What's the way to solve this?

[ag-tim]

I'm having the same problem with local fonts. When I run 'npm run build:pl' or 'npm run build:drupal' the paths are correct, but 'npm run dev:pl' or 'npm start' results in the PatternLab server looking for the fonts in locations exactly like the one that @shaal notes at the end of his post. The paths seems to be a combination of where the font is being called from and then where it really lives.

Example:
/app-pl/pl/patterns/00-protons-demo-welcome/app-pl/assets/fonts/DINPro-Regular.ttf