Fontconfig error: Cannot load default config file Node.js Canvas

Ask coding questions

← Back to all posts

Fontconfig error: Cannot load default config file Node.js Canvas

CrisKop

I cant use the fillText method in a canvas image (its for a discord bot) the letters are replaced by squares

Voters

Comments

hot new top

Coder100

Hello! You are in luck! Here is the solution:
First, install a font. I usually use Google Fonts
Second, install as a zip. Unzip it and drag in the font(s) of your choice.
Third, add this line of code at the top of the file:


const { registerFont } = require('canvas');
registerFont('path/to/your/font.ttf', { family: 'FontName' });

Now, you can use the font like:


ctx.font = "30px FontName";

Hope this helps! Be sure to mark as correct answer!

CrisKop

@Coder100 why dont work for me?

This is my code:


const { createCanvas, loadImage } = require("canvas");
const { registerFont } = require('canvas');
registerFont('fonts/ARIAL.TTF', { family: 'FontName' });


const canvas = createCanvas(300, 100);
  const ctx = canvas.getContext("2d");
  const background = await loadImage('https://i.ibb.co/tqGBQmN/Banner.png');
  ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

  ctx.font = "17px FontName";
  ctx.shadowColor = "#000000";
  ctx.shadowBlur = 1;
  ctx.fillText("Staff Points:", 140, 102);


    ctx.arc(50, 50, 35, 0, Math.PI * 2, true);
  ctx.lineWidth = 3;
  ctx.strokeStyle = "#ffffff";
  ctx.shadowColor = "#000000";
  ctx.shadowBlur = 1;
  ctx.stroke();
  ctx.closePath();
  ctx.clip();
  const avatar = await loadImage(message.author.displayAvatarURL);
  ctx.drawImage(avatar, 12, 10, 80, 80);

   const attachment = new Discord.Attachment(canvas.toBuffer(), "pts.png");

   message.channel.send(attachment);

Coder100

so your font is fonts/ARIAL.TTF? it should be fonts/arial.ttf @CrisKop

CrisKop

@Coder100 no, but when i use const { registerFont } = require('canvas'); all command dont work

Coder100

hmm?
@CrisKop

CrisKop

@Coder100 and no error in the console

tpunn19

@Coder100, Thanks for this! I've been using this for a bit now, but it seems like foreign characters/symbols from usernames aren't exactly working with the Roboto font. Any suggestions on that?

JohnFelicisimo

This is also my problem, I used heroku before, and just by making a directory named '.fonts' and putting my downloaded fonts there, everything works perfectly. I don't even use registerfonts.

vishal8909

Fontconfig error: Cannot load default config file

SixBeeps

Try making an explicit config file:
1.) Make a folder called fonts
2.) Put the font you want to use in that folder
3.) Make a file in the folder named fonts.conf and put this in it:


<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <dir>/var/task/fonts/</dir>
  <cachedir>/tmp/fonts-cache/</cachedir>
  <config></config>
</fontconfig>

CrisKop

@SixBeeps the error still

Bookie0

i dont know how to help you, but for others who can help you, you should include your repl or a link to it.