Menu
I am completely baffled as to how to change the font I'm using when drawing text on a canvas. The following is the font I have defined in my CSS:
@font-face{
font-family:"Officina";
src:url(OfficinaSansStd-Book.otf);
}
Now in my HTML/JavaScript I'm tempted to say:
context.font = '30px "Officina"';
But this doesn't work. It works fine if I use a web available font (like Arial), and the Officina font shows up fine when I just write plain text directly to the webpage. What am I missing?
200
canvas = document. querySelector('canvas'); var myFont = new FontFace('myFont', 'url(assets/fonts/myFont/myFont. otf)'); Now we create our font object using the javascript class FontFace which receives the font family and the source.
There is currently no way to change the font anywhere in canvas via the normal rich text editor. You can change the font by using the HTML editor.
Not Supported in HTML5. The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.
HTML5 canvas provides capabilities to create text using different font and text properties listed below −. font [ = value ] This property returns the current font settings and can be set, to change the font. textAlign [ = value ] This property returns the current text alignment settings and can be set, to change the alignment.
Definition and Usage. The font property sets or returns the current font properties for text content on the canvas. The font property uses the same syntax as the CSS font property.
To draw text using HTML5 Canvas, we can use the font property and the fillText () method of the canvas context. To set the font, size, and style of HTML5 Canvas text, we can set the font property of the canvas context to a string containing the font style, size, and family, delimited by spaces.
The font property sets or returns the current font properties for text content on the canvas. The font property uses the same syntax as the CSS font property. Specifies the font style. Possible values: Specifies the font variant.
To get cross-browser compatibility you should use CSS for the embedded font like this:
@font-face {
font-family: 'BankGothicMdBTMedium';
src: url('bankgthd-webfont.eot');
src: local('BankGothic Md BT'), local('BankGothicBTMedium'), url('bankgthd-webfont.woff') format('woff'), url('bankgthd-webfont.ttf') format('truetype'), url('bankgthd-webfont.svg#webfontNgZtDOtM') format('svg');
font-weight: normal;
font-style: normal;
}
Note: I got those font files somewhere at http://fontsquirrel.com
This is working for me, but I'm using this font also in HTML markup, so maybe a workaround (if the font-face definition doesn't help) can be using that font in some hidden div, of course I'm running all JS after body loads.
76
For folks coming to this question circa 2017 onwards it would be best to use the Web Font Loader that's co-produced by Google and Typekit located here: - https://github.com/typekit/webfontloader
25
You can use the Google Web Font loader, but that's rather heavyweight and/or annoying for many uses. Instead, I'll recommend Jennifer Simonds' FontDetect library, available on GitHub:
A JavaScript class you can use to determine whether a webfont got loaded, which font is being used by an element, or react to a webfont getting loaded (or failing to load).
2
This is previous question should help you. Drawing text to <canvas> with @font-face does not work at the first time
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
