Drawing text to with @font-face does not work at the first time

by

Drawing on canvas has to happen and return immediately when you call the fillText method. However, the browser has not yet loaded the font from the network, which is a background task. So it has to fall back to the font it does have available.

If you want to make sure the font is available, have some other element on the page preload it, eg.:

<div style="font-family: PressStart;">.</div>

More Related Contents:

  1. How to add some non-standard font to a website?
  2. Canvas width and height in HTML5
  3. Html5 canvas drawImage: how to apply antialiasing
  4. Drawing an SVG file on a HTML5 canvas
  5. How can I convert an HTML element to a canvas element?
  6. HTML5 Canvas and Anti-aliasing [duplicate]
  7. Base64 PNG data to HTML5 canvas
  8. How to draw a rounded rectangle using HTML Canvas?
  9. What’s the best way to set a single pixel in an HTML5 canvas?
  10. Using .otf fonts on web browsers
  11. How to change the opacity (alpha, transparency) of an element in a canvas element?
  12. How do I make a transparent canvas in html5?
  13. How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
  14. Use multiple @font-face rules in CSS
  15. Can you take a “screenshot” of the page using Canvas?
  16. HTML5 Canvas background image
  17. HTML5 Canvas slows down with each stroke and clear
  18. Combining two or more Canvas elements with some sort of blending
  19. What is the difference between SVG and HTML5 Canvas?
  20. How can I use custom fonts in an HTML5 Canvas element?
  21. Subpixel anti-aliased text on HTML5’s canvas element
  22. Draw SVG on HTML5 Canvas with support for font element
  23. @font-face not working with specific version of Internet Explorer 11
  24. Content Security Policy: “img-src ‘self’ data:”
  25. “Erasing” in html5 canvas
  26. How put percentage width into html canvas (no css)
  27. Clear Canvas Rect (but keep background)
  28. Poor anti-aliasing of text drawn on Canvas
  29. HTML5 Canvas – Fill circle with image
  30. HTML canvas with scrollbar

Leave a Comment