underscoretype / fontsampler-js Goto Github PK

Hello there, I have been implementing this library with relative ease and joy but I have hit a roadblock.

This is my options config for the fontsampler:

{
      order: [["fontfamily", "language", "fontsize", "alignment", "opentype"], "tester"],
      ui: {
        tester: {
          editable: false,
          label: false,
        },

        language: {
          choices: ["enGB|English", "deDe|Deutsch", "nlNL|Dutch"],
          init: "enGb",
          label: false,
        },

        opentype: {
          choices: ["liga|Ligatures", "frac|Fractions"],
          init: ["liga"],
          label: "Opentype features",
        },
      },
      lazyload: true,
    }

The order, language ui choices and lazyload work however any options for the tester or the label field on any feature doesn't do anything...

@kontur Am I using the wrong data structure or I am missing something? Thanks a lot!

Currently variations (axis sliders) are nested within one "variations" block — it would be way more intuitive if each defined axis were it's own block, available to the ui parameter and sorting, and emit events with that axis tag as key, instead of setting variations as object for all axes.

Option or method to type out text.

Whichever font is previewed is loaded in such a way that it can easily be downloaded via Chrome Inspect and other similar tools.
Is this the intended behavior? Is there a way to avoid this?

Obviously, running a commercial font site where the fonts are downloadable with a few simple clicks is unacceptable.

"instances": [ "wght 250|Work Sans Thin"] should equally allow "instances": ["'wght' 250|Work Sans Thin"] etc.

Currently this results in a parsing error.

Allow passing in even a fallback font name that gets attached to the css font-family of loaded fonts, so for example custom .notdef glyphs can be implemented by always using that fallback font.

E.g. the same that can now be "strapped on" after the effect with events, but instead as part of the fonts object as a fallbackFontName or similar:

fs.root.addEventListener("fontsampler.events.fontrendered", setFallback);
function setFallback(e) {
	var tester = e.target.querySelector("[data-fsjs='tester']");
	if (tester) {
		tester.style.fontFamily = tester.style.fontFamily + ", 'fallback'";
	}
}

Let's say there are 54 styles (3 widths, 9 weights with italics). The viewer will be annoyed to check the weights from the dropdown menu. Instead, all the styles can be shown at once, the user can just scroll to check how the text looks by keeping the text area separate from the sampler.

Installed npm in my PC but have no idea on how to make it usable in my Webflow project. CDN is an option, I think :S

Methods for:

• toggling lazyload behaviour
• destroying instances
• more robust value setting (particularly variable fonts)

would be nice.

E.g. "choices": ["left|", "center|", "right|"

Would be really nice to have an optional free download button built into the grid.

For single line text in particular.

I'm trying to get a variable axis, I've followed the example from
https://underscoretype.github.io/fontsampler-js/variable.html

I've added the axes and instances to the font var
name: "VariableFontName",
files: ["VariableFontFile.woff2"],
  axes: ["wght"],
  instances: [
  "wght 500, | VariableFontName Regular",]

I've added a variation element
order: ["tester", ["fontsize", "variation", "fontfamily"]],

and I've tried to define that element
variation: {
axes: [{
tag: "wght",
init: 400,
min: 250,
max: 900,
step: 10,
label: "Weight"
}]
},

but I'm still getting the error. Am I missing something? I couldn't find any more documentation on variable font support.

Particularly something like font size initial value would be very handy to be able to set to different values for different breakpoints.