[vfs_fonts.js] Using system's (or my) fonts without Encoding them

infoDVD

In CSS land, I can set system's fonts just using its name:

my-selector: { font-family: "Times New Roman"; }

Even if the font is in my web folder, I just should make the rule

@font-face {
    font-family: myNewRoman;
    src: url("my_font/My-New-Roman.woff");
}

Then I can now use the font just naming it.

BUT for the PDF extension I should set the fonts using vfs encoding it And attaching it in the vfs_fonts.js file.

I want to know How I can use a simpler way CSS-like (if possible), without Encoding and Attach them in the vfs_fonts.js file.

colin

Hi @infoDVD ,

This thread should help, it's asking the same thing.

Cheers,

Colin

infoDVD

Thanks you for your reply.

Sorry I'm dumb and I don't know what I'm doing wrong.

The original vfs_fonts.js file is:

this.pdfMake = this.pdfMake || {};
this.pdfMake.vfs = {
    "Roboto-Italic.ttf":        "AAAAencodedFontAAAyadayada",
    "Roboto-Medium.ttf":        "AAAAencodedFontAAAyadayadaf",
    "Roboto-MediumItalic.ttf":  "AAAAencodedFontAAAyadayada",
    "Roboto-Regular.ttf":       "AAAAencodedFontAAAyadayada",
    "sampleImage.jpg":      "AAAAencodedImageAAAyadayada"
};

My first try was replace the encoded fonts with my url fonts.
Even I used the same Robot fonts in my in my local folder.

this.pdfMake = this.pdfMake || {};
this.pdfMake.vfs = {
    "Roboto-Italic.ttf":        "../fonts/Roboto-Italic.ttf",
    "Roboto-Medium.ttf":        "../fonts/Roboto-Medium.ttf",
    "Roboto-MediumItalic.ttf":  "../fonts/Roboto-MediumItalic.ttf",
    "Roboto-Regular.ttf":       "../fonts/Roboto-Regular.ttf",
    "sampleImage.jpg":      "sampleImage.jpg"
};

But I got a Unknown font format error.

And I change it with:

this.pdfMake = this.pdfMake || {};
this.pdfMake.vfs = {
    "Roboto-Italic.ttf":        url("../fonts/Roboto-Italic.ttf"),
    "Roboto-Medium.ttf":        url("../fonts/Roboto-Medium.ttf"),
    "Roboto-MediumItalic.ttf":  url("../fonts/Roboto-MediumItalic.ttf"),
    "Roboto-Regular.ttf":       url("../fonts/Roboto-Regular.ttf"),
    "sampleImage.jpg":      url("sampleImage.jpg")
};

I got a uncaught exception: File 'Roboto-Regular.ttf' not found in virtual file system

Then I'm using now the code from the link you gave me:

this.pdfMake = this.pdfMake || {};

pdfMake.fonts = {
        Roboto: {
                normal:     "../fonts/Roboto-Regular.ttf",
                italics:    "../fonts/Roboto-Italic.ttf",
                bold:       "../fonts/Roboto-Medium.ttf",
                bolditalics:    "../fonts/Roboto-MediumItalic.ttf"
        }
};

But I got againt the uncaught exception: File '../fonts/Roboto-Regular.ttf' not found in virtual file system

I din't change Roboto with Arial then I'm using: doc.defaultStyle.font = 'Arial';

What I'm doing wrong?.

colin

I'm not sure about that vfs object. I've never tried doing this, but this SO post, linked to from the post I mentioned in my previous reply, is doing this:

window.pdfMake.fonts = {
        alef: {
            normal: 'Alef-Bold.ttf',
            bold: 'Alef-Bold.ttf',
            italics: 'Alef-Bold.ttf"',
            bolditalics: 'Alef-Bold.ttf',
        }
    };

infoDVD

Thanks for your reply.

Sorry if I'm wrong, but I was reading that link, then this link posted in the comments, and it seem like it works only if I embedded the fonts in the vfs_fonts.js. Right?.

I wanted to go without the vfs_fonts.js file, i.e. without a file embedding encoded fonts, because I want lighter .js files and because I already was using those fonts in my web then I was "duplicanting" the fonts embedding it.