particle icon indicating copy to clipboard operation
particle copied to clipboard

Published 20 hours ago • verified publisher icon phase2

Cannot enable local fonts

Open shaal opened this issue 6 years ago • 1 comments
trafficstars

Issue

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

Steps to reproduce

Comment out - https://github.com/phase2/particle/blob/99067bbf0b4039d265c0860b5396d86206820b4d/source/default/tokens/sass/printing/_type.scss#L18

Uncomment - https://github.com/phase2/particle/blob/99067bbf0b4039d265c0860b5396d86206820b4d/source/default/tokens/sass/printing/_type.scss#L26-L32

Change this line - https://github.com/phase2/particle/blob/99067bbf0b4039d265c0860b5396d86206820b4d/source/default/tokens/sass/non-printing/_bootstrap-overrides.scss#L91 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 - https://github.com/phase2/particle/blob/99067bbf0b4039d265c0860b5396d86206820b4d/source/default/tokens/sass/printing/_type.scss#L30 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?

shaal avatar Aug 28 '19 03:08 shaal

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

ag-tim avatar May 18 '20 19:05 ag-tim