Jimp.loadFont(Jimp.FONT_SANS_8_BLACK) not working

[BernhardSmuts]

Expected Behavior

Load up a font

Current Behavior

Not loading up a font

Failure Information (for bugs)

browser.js:71 Uncaught (in promise) Error: error parsing font malformed file -- no < pages > element at Object.callback (browser.js:71) at cbOnce (index.js:64) at XMLHttpRequest.loadFunc (index.js:131)

Steps to Reproduce

The following is react code

`const [imageData, setImageData] = useState("");

const handleSelectImage = (evt) => { console.log("Handling Image Select"); const file = evt.target.files[0];

const reader = new FileReader();

if (file) {
  reader.readAsDataURL(file);
}

reader.addEventListener(
  "load",
  async () => {
    setImgSrcOld(reader.result);
    setImgSrcNew(reader.result);
    setImageData(reader.result);
  },
  false
);

};

const handleChange = async (evt) => { setSwitches({ ...switches, [evt.target.name]: evt.target.checked }); let imageRes = await Jimp.read(imageData);

Jimp.read(imageRes).then((image) =>
  Jimp.loadFont(Jimp.FONT_SANS_8_BLACK).then((font) => {
    image.print(font, 10, 10, "Hello world!");
    setImgSrcNew(image);
  })
);

};`

Screenshots

Simply want to upload an image and write the example text to it

• Jimp Version: 0.10.3
• Operating System: Windows 10
• Node version: 10.16.2

browser.js:71 Uncaught (in promise) Error: error parsing font malformed file -- no < pages > element at Object.callback (browser.js:71) at cbOnce (index.js:64) at XMLHttpRequest.loadFunc (index.js:131)

[teezzan]

I got this error myself. I have been unable to use any of the built-in fonts since I installed JIMP. Any that successfully loads never writes to file.

[profandrew]

Same error here, using jimp on browser.

[Wyatth7]

I'm getting this error too. I've done some digging around on Jimp's docs, and I think I've figured out how their system works.

So, when using the print method (print(Jimp.[Your_Font])), Jimp finds the Your_Font.fnt file, and I believe it's within this file where we are getting this error.

Product of print(Jimp.[Your_Font])

<info face="open-sans-16-white" size="16" bold="0" italic="0" charset="" unicode="" stretchH="100" smooth="1" aa="1" padding="2,2,2,2" spacing="0,0" outline="0"/>
  <common lineHeight="18" base="15" scaleW="1836" scaleH="20" pages="1" packed="0"/>
// Below is the <pages> element which is causing the error
  <pages>
    <page id="0" file="open-sans-16-white.png"/>
  </pages>
  <chars count="188">...

The <page /> component then calls your-file.png, and I guess something is wrong with the .png file.

I have yet to find the solution to this problem.

[raghavthakur]

I'm also getting the same error "font malformed file".

[rub1e]

I was having the same issue; depending on your stack, this might not be the issue you're facing, but in case it helps:

• The error message is misleading - there's nothing wrong with the file, the error is happening because the font file wasn't loaded in the first place
• I'm using Gatsby / static site, which means no fs - so accessing a file by its path in the usual way isn't possible
• The solution was to copy the font files (both the fnt and the accompanying png) into the static folder so they can be accessed, and setting the path as the first argument to loadFont()

See here if you're using Gatsby

[T3XRD]

@BernhardSmuts Hi! Did you fix it? If yes how did you do this?

[BernhardSmuts]

Hi.

Unfortunately not. I was never able to implement it into my project and abandoned that feature in the project.

On Tue, 19 Jan 2021, 00:55 Vlad Vasilenko, [email protected] wrote:

@BernhardSmuts https://github.com/BernhardSmuts Hi! Did you fix it? If yes how did you do this?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/oliver-moran/jimp/issues/885#issuecomment-762504045, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFLKBMGVC2SKDWPRHHASZKTS2S37XANCNFSM4M55FM7A .

[PatrykMilewski]

The solution is to simply copy content of https://github.com/oliver-moran/jimp/packages/jimp/fonts to your public directory of your React app.

If you pasted it correctly, then you should be able to reach files using a simple link: http://localhost:3000/fonts/open-sans/open-sans-8-black/open-sans-8-black.fnt

There is also probably some Webpack setting that can achieve the same.

[hipstersmoothie]

@PatrykMilewski is right you just have to host the fonts with your app