Web: allow to use Fira Code in editor (Safari)

[bpasero]

Open web in Safari with "editor.fontFamily": "Fira Code". the font is not being loaded it seems. Works fine in other browsers.

The only workaround that helped as to directly import the font into the HTML (https://cdn.rawgit.com/tonsky/FiraCode/1.205/distr/fira_code.css). Maybe related to how they define a src for the font and we don't?

[bpasero]

//cc @alexandrudima who I think knows why this happens

Maybe one workaround would be to at least not fallback to a serif-font when this happens but rather pick our default (if we can possibly detect that).

[alexdima]

My theory is that this is blocked to prevent finger-printing via installed fonts...

I am not sure how the editor itself can validate this setting, because the editor can be embedded in pages which do contain Fira Code via CSS...

So I think we might need special editor.fontFamily Safari validation, but only in the workbench (not the standalone editor)...

[bpasero]

Maybe somewhere here: workbench#restoreFontInfo

[alexdima]

AFAIK that piece of code only executes on startup (to load the previous font metrics from local storage and avoid measuring the font and doing a sync layout in the startup phase). It is possible to change editor.fontFamily after the workbench startup, so that place would not be good.

I think we need an editor contribution that only executes on the web, on Safari, and which listens to editor option change events, and checks if the fontFamily is configured with a font that work on Safari or not... But how should we know the entire list of fonts that work on Safari?

[alexdima]

I have found this -- https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS , should we ship with this list hard coded somewhere?

[bpasero]

I like that. We can possibly put this somewhere into our workbench specific overrides for the editor? E.g. when running in Safari, we do not allow a font family that is not in that set?

Code pointer: getConfigurationOverrides

[alexdima]

@bpasero When you played with the CSS variant, did you experiment with using local as a src?

https://stackoverflow.com/a/43502304

e.g.

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url("font/montserrat/montserrat-latin-regular.eot");
  src: local("Montserrat-Regular"), url("font/montserrat/montserrat-latin-regular.eot?#iefix") format("embedded-opentype"), url("font/montserrat/montserrat-latin-regular.woff2") format("woff2"), url("font/montserrat/montserrat-latin-regular.woff") format("woff"), url("font/montserrat/montserrat-latin-regular.ttf") format("truetype"), url("font/montserrat/montserrat-latin-regular.svg#Montserrat") format("svg"); 
}

[alexdima]

Actually it looks like this is a known limitation, for example designers try to use Figma in the browser with their local fonts... and they need to install an app for that... -- https://help.figma.com/article/356-use-local-fonts-with-figma-font-helper

[alexdima]

Yeah, I finally could find a definitive answer -- it is done to avoid fingerprinting -- https://stackoverflow.com/a/52805055

[bpasero]

I actually think this is a fair workaround:

"editor.fontFamily": "Fira Code, Menlo, Monaco"

It works nicely on Safari to fallback to Menlo.

[Mara-Li]

Hello! Sorry to bother. I want to know if there is a way to import font (embedded using base64, for example) to change the font in safari ? Using HTML <style> or a CSS file ?

Thank you :)!

[oliverlabs]

Has anyone been able to work around this? Any Nerd Font in Safari seems to be blocked.

[7ombie]

Safari removed the workarounds a while ago (see this StackOverflow question).

The proper way to use Nerd Fonts in Safari is to serve them along with the client. I'm pretty sure browsers only load what they need (font-wise), so that would be an option, but requires changes on the server.

As a user, you'd need to achieve the same effect without access to the server (assuming you're not hosting VSCode yourself). It may be possible to use a browser extension to inject the font into the page, or just create a browser extension for injecting the font. IIUC, as long as the font is loaded by the page, referencing it will work.

[7ombie]

Another option is to install VSCode locally and attach to a remote server. For example, GitHub Codespaces allows you to open the codespace using your local VSCode installation:

I'm using Iosevka Nerd Font with this approach (without any issues).