Spacebar being weird

[setsailsam]

Hi Johannes,

I'm experiencing some strange issues with the spacebar when using the Fontsampler. When using Safari and Chrome, the first spacebar typed will return the text cursor to the beginning of the line, rather than entering a space. In Firefox, the spacebar adds a space, but then that space disappears when you continue typing.

I just had a few suggestions too;

• Is there any way we can add a 'loading' icon when first launching the fontsampler? I have some very messy fonts with a lot of anchor points, which I think is resulting in a bit of a heftier load time!
• Is there any way that each of the individual fonts within a fontsampler can generate their own separate "Buy" URL? (URL dynamically changes when a different font is selected within the drop-down).

As always, many thanks for your help and for creating such a great plugin.

Cheers, Sam

[kontur]

Sorry for the late reply, this one slipped past my inbox.

Would it be possible for you to share with me either a link to the Fontsampler in question or send me the Webfont? I would suspect there is an issue with the font itself somehow, or with Opentype features, but without seeing the problem in action I can only take guesses. You can also email me a support@underscoretype.com

As per your suggestions, those things could already be achieved, more or less easily:

Fontsampler instances already have a "loading" style (faded out), just no spinner. You can use this css in your theme to add a spinner to any loading Fontsampler:

.fontsampler-wrapper.on-loading {
    background: #fff url("path/to/your/spinner.gif") no-repeat center center;
}

For changing the buy link you can hook into the Javascript event fired when a different font is selected, also in your theme js. This is untested code to illustrate where to start, but this probably needs a developer involved to somehow setup the linking between Fonts and the URLs you want to change:

// React to a font being activated in the Fontsampler
$(document).on("fontsampler.event.activatefont", function (event) {
    // Getting the selected font name or index in the dropdown
    var selectedFontText = $(event.target).find(".fontsampler-ui-block-fontpicker option:selected").html()
    var selectedFontID = $(event.target).find(".fontsampler-ui-block-fontpicker option:selected").html()

    // Change the link destination by some logic... you probably need to have a javascript object/variable with the different URLs based on the Fontname, for example
    $(event.target).find(".fontsampler-ui-block-url a").attr("href", …)
})

Hope this helps :)

[setsailsam]

No problem! Thanks for getting back to me.

Thanks for the preloader CSS - that's working great!

I'll drop you an e-mail regarding those other points if that's OK, as I was hoping to discuss this further with you.

Speak soon! Sam

[kontur]

The "odd" space bar behavior is due to the "no line breaks" option being enabled on a WOFF file that misses the nbspace uni00A0. See #156