-
|
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 |
Beta Was this translation helpful? Give feedback.
Replies: 21 comments 3 replies
-
|
Similar problem here, only I set my custom typeface in the VS Code but what's printed is the default Menlo. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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.
|
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
|
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??? |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
|
@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
|
Beta Was this translation helpful? Give feedback.
-
|
I notice that in your snap
|
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Did you also tick
|
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
Nah I'll alter path resolution as follow
|
Beta Was this translation helpful? Give feedback.
-
|
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. You said there was an exception reported launching Edge as the alternate browser. That doesn't happen on mine. I appear to have Monterey 12.7.6 and Edge 132.0.2975.127 Will install FF and try that but right now it's time to connect to the office and start work. |
Beta Was this translation helpful? Give feedback.
-
|
I researched this error This is an Edge error, apparently. It's not occurring on my system at all so maybe your Edge installation is somehow borked? Or maybe you have a happier combination of OS and browser. I looked at the Glean exception for FF and one of the proposed fixes is to clear your cookies and cache. FFS, really Firefox? I actually hope that doesn't work. |
Beta Was this translation helpful? Give feedback.
-
|
I Installed Firefox and it worked without incident. Then I tried Safari. Safari doesn't work at all as an alternate browser. It launches but it assumes that when launched directly the argument must resolve in the filesystem and it prefixes the argument with I will update the documentation to politely explain that Safari is a borked piece of shit. I will also mention that it is possible to experience the Firefox or Microsoft Edge glitches you described. Would you mind reinstalling them to see whether that resolves things please? If it does, I will include that as remedial advice. Finally, Firefox is a more compliant browser anyway so I think it's probably appropriate to list the shortcomings of Safari and then suggest installing Firefox and setting it as the default browser (or Chrome, for people who don't mind Google spyware). I think I know what's going on with Safari and fonts. I do not provide Many of the devs on the VS Code team use Mac and vscode.dev is their love-child getting far more resource and dev time than it really deserves, so out of curiosity I exercised locally installed Fira Code in Safari. Our little Safari font problem also occurs for the web version of VS Code. It's probably not fixable. Well... Apple could fix it but that would require an admission that an Apple product was inferior to absolutely everything else on the market. |
Beta Was this translation helpful? Give feedback.
-
• OK. Extinguished all traces of Firefox from my system and reinstalled, and after doing all the startup things it requires, quit the app. Firefox version is 135.0 (64-bit). • Launched VSC, reset Firefox as the alternate browser for Print to use. • Clicked the Print preview icon in the Editor. Firefox launched but did not become the foreground app. Brought it to the foreground and the preview was as expected 👍. The preview page also updates as changes are made to the source file in VSC. • Closed all windows in Firefox, but left the app running. Clicked on the Print preview icon. Firefox pops to the foreground with the preview shown as it should. All good and the preview page also updates as changes are made to the source file in VSC.👍👍. • Did see VSC throw one instance of:
but I think it has to do with timing. If I close the preview tab in Firefox while Print is still "talking" to it Print throws the error. Only saw it once so 🤷🏼♂️. Seems then that things are sorted as much as they can be at the moment. Thanks for the extension and for working through the issues. Much appreciated! |
Beta Was this translation helpful? Give feedback.
-
|
Incidentally I got the code working for automatically finding the executable from an OSX app manifest, it will appear in a later release after I get it to work for all platforms. Windows and Linux don't have a manifest like that so it's harder to support a folder path. Or maybe I won't, because users of those platforms don't expect it. Still thinking on that. |
Beta Was this translation helpful? Give feedback.
-
Summary answer
|
Beta Was this translation helpful? Give feedback.
Summary answer