question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[feature request] loading custom font support

See original GitHub issue

deno-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:open
  • Created 2 years ago
  • Comments:22 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
DjDeveloperrcommented, Feb 16, 2022

It is 0.32.0

0reactions
andykaiscommented, Aug 30, 2022

@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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found