Question

I am creating an app that lets you preview fonts on the web, in the same way myfonts does it. Anyone know how they do it so fast?

My method is to generate font previews usign HTML5 Canvas and some Javascript. This is an alternative to doing it server side and generating images using PHP GD library or Imageick.

However, although using HTML5 canvas makes things lightining fast and all the processing is on the client side. I am having trouble hiding the fonts that I load because I have to use font-face to load the fonts:

    @font-face {
        font-family: 'Press Start 2P';
        src: url('fonts/PressStart2P.ttf');
    }

And use JS to render to the canvas:

        $('#draw').click(function () {
            var canvas = $('canvas')[0],
            ctx = canvas.getContext('2d');
            ctx.font = '12px "Press Start 2P"';
            ctx.fillStyle = '#000';
            ctx.fillText('Hello, world!', x, y += 20);
            ctx.fillRect(x - 20, y - 10, 10, 10);
        });

Any ideas on how I can keep the font paths secret or any other alternative methods to generating images really quickly. I need to generate about 40+ images on each page very frequently.

Answer 1

I don’t think they generate them really fast at all. The text is static, and cannot be changed by the user, so they can just pregenerate all images.

If you need your text to be dynamic, indeed you have the option of rendering on the client side or on the server side.

If you want to “hide” the font from the user, the only way is server-side rendering. There really is no way to allow the browser to use the font, but not allow the user to save it to wherever they like. They can just use the Chrome Inspector or Firebug to access any resource downloaded by your web page, no matter how well you obfuscate the URL.