Search code examples
wordcloud2

Font family randomly not applying

I've got my wordcloud looking pretty excellent now. But one problem I'm having is that at random times, and on random browsers, random words (up to 7) don't get the font family applied.

For instance, this is what I get on my iPhone 13: enter image description here

You can see that the words "Open", "Fun", "Felt", "New", "Deal", "Feels", and "Genuinely" are all appearing in a serif font.

A coworker on a desktop, using Chrome, is getting only the word "Deal" in another font. On my desktop, in FireFox, Chrome, and Safari, everything looks fine (except for a bit of cutoff along the bottom that I don't understand...yet).

I'm using the Roboto font throughout my website, but in my css I've got fallbacks. I'm not sure how to create a fallback in the WordCloud2 script though. But I'm honestly not even sure if having a fallback would help. This seems like a script glitch of some sort, but I've no idea how to track it down.

Here are the options I have set:

        list: list,
        FontSize: 250,
        fontFamily: 'Roboto',
        fontWeight: '900',
        minFontSize: 10,
        backgroundColor: '#fff',
        color: function (word, weight) {
            return weight > 9 ? '#32587d' :
                ['#b5c1af', '#c88362', '#e0c094'][Math.floor(Math.random() * 3)];
        },
        weightFactor: 19,
        drawOutOfBound: false,
        shrinkToFit: true,
        wait: 50,
        shuffle: false,

        abortThreshold: 0,
        abort: function noop () {},
        minRotation: 0,
        MaxRotation: 0,
        rotationSteps: 0,
        rotateRatio: 0,
        classes: null,
        hover: null,
        click: null
Solution

  • Your problem is actually really simple. Not everyone has the font file for Roboto. To resolve this issue you can do one of the following.

    1. Either add backup fonts:

    fontFamily: 'Roboto, Arial, sans-serif',

    or

    1. Add the following code from google fonts so that every browser can load the font file:

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">