This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Print Typeface not rendering #305
Comments
|
Similar problem here, only I set my custom typeface in the VS Code but what's printed is the default Menlo. |
|
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. |
|
While I'm getting to this, would you please
If you can determine which CSS class is actually contributing the value in use, that would be super handy. |
|
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.
|
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 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. |
|
Hi and thanks for the extension. Just confirming this is still an issue. macOS: 15.2 VSCode: 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 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. |
|
@PeterWone Screenshots below: 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
|
|
I notice that in your snap
|
|
OK, ran a few more tests. On my system, only if the font exists in the directory 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 If I swap the order to this: then American Typewriter, located at In all cases, I also tried with 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 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 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. |
|
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:
To install Fira Code on your Mac, follow these steps:
Once installed, you should be able to use Fira Code in your CSS font-family declarations. Does this help with your testing setup? |
|
Another thing, I just noticed you write of 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 |
|
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 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. |
|
Did you also tick
|
|
Ah! Misssed that bit. Ticking that box and hitting the Print Preview icon now throws: Which technically is true of all macOS applications, it's just the way Apple bundles all the resources of the app. Changing the path to |
|
You must supply the path to the executable. It's building a bash command to launch Firefox with a url argument. Look in that Firefox directory for the name of the executable. You can test the path in terminal, when you get it right you can use it to start Firefox from the command line. On my Mac it appears that the path for Microsoft Edge is
In Terminal, the command For Firefox your executable path will probably be something like |
|
Changing the path to Noting as well that with this, the Firefox window opens behind VSCode. Diffing behaviour than with Safari, which becomes the frontmost window when the Preview icon is clicked. Trying with MS Edge (Version 132.0.2957.127 (Official build) (x86_64)) works, and it becomes the foreground app but VSCode throws: Trying with Google Chrome (Version 132.0.6834.160 (Official Build) (x86_64)) works. Proper font used, Chrome comes to the foreground, no error messages in VSCode, even when changing the source file. Winner winner chicken dinner. Obviosly all browsers are not alike. So, the workarounds at the moment seem to be:
Might be useful to add to the documentation for macOS a note that the complete path (inside the app package) must be used. |
|
Because I use Edge without incident on my Mac I checked the settings. Apparently I have set Edge as the default browser, and when launched that way it works fine. I will have to do further testing. |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
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
The text was updated successfully, but these errors were encountered: