[feature request] loading custom font support
See original GitHub issuedeno-canvas supports writing text to a canvas:
import { createCanvas } from 'https://deno.land/x/canvas/mod.ts'
const canvas = createCanvas(500,600)
const ctx = canvas.getContext('2d')
ctx.fillStyle='red'
ctx.fillText(50,50,"Hello World")
await Deno.writeFile("image.png", canvas.toBuffer());
this is currently only limited to fonts your system knows about (it might even be more limited than that). Canvas kit has an api for loading custom fonts https://skia.org/docs/user/modules/quickstart/#text-shaping. Itd be great if deno-canvas supported loading custom fonts. I think pulling in the whole paragraph builder api might be substantial, but all I would personally be interested in is mirroring the browser’s canvas apis with the addition of being able to load custom fonts. E.g.
import { createCanvas, registerFont } from 'https://deno.land/x/canvas/mod.ts'
const canvas = createCanvas(500,600)
const ctx = canvas.getContext('2d')
await registerFont({
font_family: 'Comic Sans',
// extra fancy would be supporting a url here (e.g. file:///my-fonts/comic-sans.ttf or any web url)
src: './my-fonts/comic-sans.ttf'
})
ctx.font = 'Comic Sans'
ctx.fillStyle='red'
ctx.fillText(50,50,"Hello World")
await Deno.writeFile("image.png", canvas.toBuffer());
the registerFont
method is very similar to the css interface for loading fonts:
@font-face {
font-family: 'KulminoituvaRegular';
src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
}
Issue Analytics
- State:
- Created 2 years ago
- Comments:22 (7 by maintainers)
Top Results From Across the Web
Custom Font Support | Voters - Framer
We're quickly following this up with desktop support for embedding fonts to a project. Learn more here. We hear you on styles/tokens and...
Read more >support loading fonts with raw data · Issue #101 · yisibl/resvg-js
Hello, thanks for this awesome library - I came across it via svg2img. Would it be possible to support loading fonts via raw...
Read more >Feature Request - Custom Fonts in Themes - Manager Forum
Just a few questions. Where should we load the fonts on the server version? How do we get the name of the Font...
Read more >How To Load and Use Custom Fonts with CSS | DigitalOcean
In this tutorial, you will try out examples of loading fonts onto your website. You will use the font stack, a rank ordering...
Read more >The Best Font Loading Strategies and How to Execute Them
It's often easier to cloud-hosted fonts. The provider will give us a link to load the fonts. We can simply plunk this link...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
It is 0.32.0
@webdev3301 I believe there is still an issue with measuring custom loaded fonts. See this message above: https://github.com/DjDeveloperr/deno-canvas/issues/17#issuecomment-926166920