Print Typeface not rendering

[Kush-4826]

The Type face that is selected in the VS Code is not applied to the prints. The prints appear in the browser default Serif font.

This is the Default Font Family Setting in the IDE

This is What the code looks like in the IDE

And this is what the Print looks like

[ChaganKhagan]

Similar problem here, only I set my custom typeface in the VS Code but what's printed is the default Menlo.
Suppose this problem is either related to Non-System typefaces or when the fonts have format of .otf

[PeterWone]

Sorry to keep you both waiting, we have some build problems blocking release so the backlog has been building. First I'll get the build going, then the low hanging fruit, then I'll put some time into this one.

[PeterWone]

While I'm getting to this, would you please

1. Tell me what platform you're using (Win/Linux/MacOS).
2. Tell me what browser you're using (a Chromium derivative, Firefox, Safari or something else)
3. Disable Print and Close in your settings so the browser print dialog doesn't open when the print job is sent to the browser then trigger the problem and inspect the page to tell me what font-family is being specified for the incorrectly formatted text

If you can determine which CSS class is actually contributing the value in use, that would be super handy.

[ChaganKhagan]

Hi Peter! Thanks for reaching to me. I have been doing some very tiny experiments myself and this is what I have discovered. Hopefully it will be of any help. First I’ll answer your questions. 1. I am using macOS 14 (Sonoma) 2. I am using Safari 3. This is the font settings I applied on my VS Code:  4. This is the snapshot of the source code I took from Safari:  I have confirmed that all four lines (font-family, font-size, line-height and padding bottom) are manually adjustable in situ and the changes will take effect realtime. If I change the default font-family to another ’System' Font, say ‘Comic Sans MS', the rendering will change as well. But if I change the default font-family to a non-system Font (those I installed later), the rending will not change at all, regardless of the font format. Hopefully my findings could be of any help. Coding Wishes, Sylvester

…

Peter Wone ***@***.***> 於 2024年5月9日 09:11 寫道： While I'm getting to this, would you please Tell me what platform you're using (Win/Linux/MacOS). Tell me what browser you're using (a Chromium derivative, Firefox, Safari or something else) Disable Print and Close in your settings so the browser print dialog doesn't open when the print job is sent to the browser Inspect the page and see what font-family is being applied to the source text If you can determine where the value came from via CSS that would be super handy. — Reply to this email directly, view it on GitHub <#305 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BAHWIPZ2674G2CJJFXUHUQ3ZBLENVAVCNFSM6AAAAABGZ4EAAWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBRG42DMOBXGE>. You are receiving this because you commented.

[PeterWone]

Similar problem here, only I set my custom typeface in the VS Code but what's printed is the default Menlo. Suppose this problem is either related to Non-System typefaces or when the fonts have format of .otf

It is almost a certainty that this or something similar is the problem. The browser must be able to resolve the typeface from the name. This hasn't been an issue for symbolic names like serif or monospace and on Windows where most people use it, the typeface name reported by VSCode settings has been correctly resolved by all common browsers, but this issue suggests this does not hold for MacOS.

I do have a Mac for the specific purpose of debugging this kind of problem so I'll set it up and experiment with different fonts. It may be necessary to invent some kind of setting for mapping names if there isn't a single mapping function.

If you're interested in investigating this then you could save the page and supporting resources to a folder (I assume this is possible with Safari, certainly Chrome derivatives can do it). Then you can tinker with the font-family in the CSS until you figure out what to do to the name to get it to resolve.

[Xylopyrographer]

Hi and thanks for the extension. Just confirming this is still an issue.

macOS: 15.2

VSCode:
Version: 1.96.4
Commit: cd4ee3b1c348a13bafd8f9ad8060705f6d4b9cba
Date: 2025-01-16T00:16:19.038Z
Electron: 32.2.6
ElectronBuildId: 10629634
Chromium: 128.0.6613.186
Node.js: 20.18.1
V8: 12.8.374.38-electron.0
OS: Darwin x64 24.2.0

Browser: Safari Version 18.2 (20620.1.16.11.8)

In my configuration, IDE typeface is JetBrains Mono, ligature enabled (though bug still exists with this set to disabled).

Not sure I followed all the CSS debugging hints above but glad to provide any information to help resolve.

But seriously Microsoft. No built-in Print capability???

[PeterWone]

Hi and thanks for the extension. Just confirming this is still an issue.

macOS: 15.2

VSCode: Version: 1.96.4 Commit: cd4ee3b1c348a13bafd8f9ad8060705f6d4b9cba Date: 2025-01-16T00:16:19.038Z Electron: 32.2.6 ElectronBuildId: 10629634 Chromium: 128.0.6613.186 Node.js: 20.18.1 V8: 12.8.374.38-electron.0 OS: Darwin x64 24.2.0

Browser: Safari Version 18.2 (20620.1.16.11.8)

In my configuration, IDE typeface is JetBrains Mono, ligature enabled (though bug still exists with this set to disabled).

Not sure I followed all the CSS debugging hints above but glad to provide any information to help resolve.

But seriously Microsoft. No built-in Print capability???

Just to confirm, you specified 'JetBrains Mono' in the setting Editor: Font Family and it renders properly in your editor?

Would you mind supplying screen snaps of the setting, the font working in the editor and not working in the preview? I can't produce this on my test Mac and I need to supply evidence for the Stack Overflow question I've posted. I loathe using Stack Overflow, the question itself has already been downvoted. No comment, no answer, just a kick in the teeth.

One thing to check, try deliberately using the wrong case in the font name to see whether it continues to work properly in the editor. If the editor is sensitive to font-name case this allows us to validate the correctness of the specified name.

[Xylopyrographer]

@PeterWone Screenshots below:
Did a bit of experimenting. Seems if I pick a font located in /Library/Fonts/ it does not render with the Print extension. However, if I pick a font located in /System/Library/Fonts/, it renders as expected.

If I mis-name a font in Editor:Settings, VSC uses its default font.

I tried moving the font into ``/System/Library/Fonts/` but the OS won't allow that.

LEt me know if I can provide anything else.

Should note this was done using pdconsec.vscode-print v0.14.1

[PeterWone]

I notice that in your snap JetBrains Mono contains a space but is not quoted. Try quoting it like so 'JetBrains Mono' and tell me whether that makes any difference. Mine looks like this:

[Xylopyrographer]

OK, ran a few more tests.

On my system, only if the font exists in the directory /System/Library/Fonts/, including subdirectories in that folder, is it used by the Print extension.

And Print will use the first font in the VSCode Settings list that is located in that folder (and its subdirectories), ignoring those first in the list that are located elsewhere.

For example, with the following set in VSCode:

Marker Felt which is located at /System/Library/Fonts/MarkerFelt.ttc is used to render the print.

If I swap the order to this:

then American Typewriter, located at /System/Library/Fonts/Supplemental/AmericanTypewriter.ttc is used.

In all cases, Jetbrains Mono, located at /Library/Fonts/JetBrainsMono-Regular.ttf is correctly used as the Editor font.

I also tried with .ttf files located in /System/Library/Fonts/, to eliminate .ttf vs .ttc as a potential issue. Results were the same.

Also, FWIW, unclear if the CSS's used by Print render ligatures? Though they are turned on in the VSCode settings, they were not rendered, but that may be because none of the fonts in /System/Library/Fonts/ support ligatures?

Curious to see if you changed the order in your VSCode settings to match what I did if you see the same results as I'm wondering if mono isn't actually being used when rendering? I also tried the above replacing 'Jetbrains Mono' with 'Fira Code' and again the results were the same.

As a workaround, I've set things as:

Annnnd one more thing; quoting font names with spaces does not seem to be required as:

also renders using American Typewriter.

Let me know if I can do more digging.

[PeterWone]

Today I tried to reproduce the issue on a Mac. I installed Fira Code using the instructions provided by Bing Copilot, and... everything just worked. Here's a copy of my query and the resultant instructions. I downloaded the font from GitHub and installed it using Font Book. I did not specify which of the various version (TTF, WOFF etc) was to be used, I let Font Book decide all that. Then I started VS Code, found some source code and tried a preview, which used the font and rendered ligatures.

Please work the exercise. If Fira Code works, try installing JetBrains Mono using Font Book and see whether it sets up some kind of registration info that supports the magic of name resolution.

A user reports that fonts specified in CSS font-family do not work on Mac unless they are system fonts. I cannot reproduce this because the Mac I use for testing only has system fonts. Tell me where I can download a free dev font like Fira Code and how to install it on a Mac.

You can download Fira Code from the following sources:

1. Google Fonts: Fira Code on Google Fonts
2. GitHub: Fira Code on GitHub

To install Fira Code on your Mac, follow these steps:

1. Download the Font: Download the font file (usually a .ttf or .otf file) from one of the sources above.
2. Open Font Book: Open the Font Book app on your Mac. You can find it in your Applications folder or use Spotlight to search for it.
3. Install the Font: In Font Book, go to File > Add Fonts. Navigate to the location where you downloaded the font file, select it, and click Open.
4. Validate the Font: Font Book will automatically validate the font for any errors. If there are no issues, the font will be installed and ready to use.

Once installed, you should be able to use Fira Code in your CSS font-family declarations.

Does this help with your testing setup?

[PeterWone]

Another thing, I just noticed you write of ttc files rather than ttf so I looked up ttc in the context of Mac fonts. Apparently a TTC file is a "TrueType collection". I had a look at what's in the Fira Code download bundle. There's no TTC files so maybe this is related.

I then searched for JetBrains Mono, found it on GitHub, downloaded the font package and same story. Works perfectly for me. Interestingly, there was no ttc in the package. The other listed installation method involved a tool called "brew" that I didn't have. I wonder whether the brew installation method is problematic.

[Xylopyrographer]

Peter: Long story short. Seems this is an issue with the macOS Safari browser. With the Print extension in the default state, it uses Safari. If I examine the Print preview page using the Safari Developer tools I get as per the image below.

I can edit the fonts used, but regardless Safari will only let you select fonts located in the /System/Library/Fonts/ folder. Those are the only choices in the dropdown menu. All fonts prior that are not in this folder are ignored.

Now if I copy the preview page link from Safari and open Firefox and paste in the URL, it renders using JetBrains Mono. So sucess there.

However... if I open the Print extension preview and enter the path to Firefox as the alternate. browser, it does not stick. Safari is always used.

Hope this helps progress the issue.

Note, .ttc .woff, etc files: no change to any of the above.