search

vexflow / vexflow-fonts

Fonts for use with VexFlow. Each font is published as a separate NPM package.
https://www.npmjs.com/settings/vexflow-fonts/packages
3 stars 0 forks source link

Remove version from font names, document version in a text file #5

Closed rvilarl closed 1 year ago

rvilarl commented 1 year ago

@ronyeh now we have to load the fonts like

 @font-face {
    font-family: 'Bravura';
    src: url(https://cdn.jsdelivr.net/npm/vexflow-fonts@1.0.6/bravura/Bravura_1.392.otf) format(opentype);
  }

it would be better to have the possibility that @jaredjj3 suggested

 @font-face {
    font-family: 'Bravura';
    src: url(https://cdn.jsdelivr.net/npm/vexflow-fonts@latest/bravura/Bravura.otf) format(opentype);
  }
ronyeh commented 1 year ago

Hi @rvilarl !

See my recent PR work in progress. I should have it ready for review soon.

https://github.com/vexflow/vexflow/pull/98/files#diff-747302b77c6430f5bca6bf68e7ac32a869194139220a2ee3019bb873bba7a318R261-R287

The vexflow-fonts URLs that you have above are the old way (VexFlow 4.x).

We have moved all the fonts to individual NPM projects under a @vexflow-fonts namespace. The font names no longer have version numbers in them.

Tagging @jaredjj3 so he's aware that this has already been implemented (via this vexflow-fonts repo that you're looking at right now). The font files under the vexflow repo will eventually be removed.

You can already use all the new URLs. For example:

https://cdn.jsdelivr.net/npm/@vexflow-fonts/finalejazz/finalejazz.woff2

See the vexflow/tests/fonts.css for examples. This file is used by the flow.html test page.

fonts.css uses the local fonts installed by npm install: ../node_modules/@vexflow-fonts/finalejazz/finalejazz.woff2

Replace ../node_modules/ with https://cdn.jsdelivr.net/npm/ to get the new URL for the font file.

You can see what files are in each font project with URLs like: https://cdn.jsdelivr.net/npm/@vexflow-fonts/finalejazz/ https://cdn.jsdelivr.net/npm/@vexflow-fonts/bravura/ https://cdn.jsdelivr.net/npm/@vexflow-fonts/petaluma/

ronyeh commented 1 year ago

If you look at the files inside this repo: https://github.com/vexflow/vexflow-fonts

You'll see that the file names do not have version numbers. Each folder is a separate NPM project, and the README.md contains the version and source URL information.

ronyeh commented 1 year ago

Eventually.... we will be able to remove the vexflow/tools/fonts/@/ folder that we introduced in VexFlow 4. This separate repo is the new V5 approach.

rvilarl commented 1 year ago

Thanks @ronyeh! I was thinking about starting a vexflow-examples repo with html pages showing how to use vexflow. I would start with the tutorial steps and then add other ones. This would replace the need touse jsfiddle.