Custom Font
adamperlis opened this issue · 3 comments
Hey there, thanks for this great library. Quick question, I want to load a custom font from typekit. How might I add that to this example: https://codepen.io/SimonEvans/pen/PQKgyQ
Also how can I make sure it scales responsively? Thanks for your help!
load a custom font from typekit
The problem with your external (typekit) fonts is that you need to wait for the fonts to be loaded for them to be able to be drawn into a canvas element, which Blotter does with your texts. It's debatable, but I ultimately decided that solutions to waiting for fonts to be loaded prior to working with them in JS was outside of the scope of Blotter, as there are multiple options depending on a specific user's circumstances.
That said, Ill show one option (I used google fonts but typekit should be the same) using the document.fonts property/API: https://codepen.io/bradleygriffith/pen/wOrewY. Note that I added the the font script tag in the head of the document, and wrapped your JS in a document.fonts.ready callback.
load a custom font from typekit
The problem with your external (typekit) fonts is that you need to wait for the fonts to be loaded for them to be able to be drawn into a
canvaselement, which Blotter does with your texts. It's debatable, but I ultimately decided that solutions to waiting for fonts to be loaded prior to working with them in JS was outside of the scope of Blotter, as there are multiple options depending on a specific user's circumstances.That said, Ill show one option (I used google fonts but typekit should be the same) using the
document.fontsproperty/API: https://codepen.io/bradleygriffith/pen/wOrewY. Note that I added the the font script tag in the head of the document, and wrapped your JS in a document.fonts.ready callback.
What about a local custom font set with @font-face? For some reason new Blotter.Text(textEl.innerHTML, { family: "its name" does not do the trick?
Hi Bradley, I'm noticing that for some reason, on on the first page load Blotter is defaulting to Times New Roman, and then updating to my custom font after a few refreshes. Any insight into why this is happening, and how I can fix it? See here: