Search code examples
javascripthtmloptimizationcanvasfont-face

Performance wise, should I use @font-face or should I "draw" the text with Javascript and HTML canvas?

The situation I have is that I have to create a web version of a physical fashion magazine. The magazine cover has 5 different fonts with 5 different styles. Performance wise, should I use @font-face or should I "draw" the text with Javascript and HTML canvas?

EDIT: Web version is targeted for iPad, I'll be build the web app and then use PhoneGap so I can submit the app to the App store.

Solution

  • Only assumptions can be made in regards to this answer because so much is dependant on:

    1. The OS and browser because it is the OS and browser that do the work to pretty up the HTML document.
    2. The bandwidth speed of the people opening up your web page. With the CSS approach its another resource (or multiple resource for fonts as well) that need to be downloaded. Yes agreed this is less of an impact these days.
    3. What about the limitations of Canvas, e.g. Internationalization, search engine optimisation, integration with web content management, accessibility, etc... Most possible but effort required.
    4. Finally, the effort to do the canvas vs CSS approach. I'd imagine it would be quicker to implement with CSS.

    Personally I'd stick with CSS for this, I like to separate my content (HTML), presentation (CSS) and logic (JavaScript) a guide only!