Making VSCode Flatpak Use Fonts from ~/.fonts

Making VS Code Flatpak Use Fonts from ~/.fonts

If you've recently replaced RPM VS Code with Flatpak VS Code on your Fedora 40 laptop, but haven't been able to set the font correctly because VS Code doesn't seem to pick up font files from ~/.fonts, you're not alone. This article will guide you through the process of making Flatpak VS Code use fonts from ~/.fonts.

Understanding the Issue

Flatpak is a sandboxed application that runs in its own environment, separate from the host system. By default, Flatpak applications cannot access font files installed in the host system. This is because Flatpak is designed to provide an isolated environment for applications to run in, improving security and stability.

However, this isolation can be a problem if you want to use custom fonts installed in your home directory. By default, Flatpak VS Code will not be able to see font files installed in ~/.fonts. To work around this issue, you need to create a custom font directory inside the Flatpak environment and copy the font files from ~/.fonts to this directory.

Creating a Custom Font Directory

To create a custom font directory for Flatpak VS Code, follow these steps:

1. flatpak run --command=sh org.freedesktop.Platform //bin/sh
2. mkdir -p ~/.var/app/org.vscode.VSCodium/config/fonts

The first command will open a shell inside the Flatpak environment. The second command will create a new directory called fonts inside the Flatpak configuration directory.

Copying Font Files

Now that you have created a custom font directory, you need to copy the font files from ~/.fonts to this directory. You can use the rsync command to do this:

1. rsync -av --no-perms ~/.fonts/ ~/.var/app/org.vscode.VSCodium/config/fonts/

This command will copy all the font files from ~/.fonts to the custom font directory inside the Flatpak environment.

Configuring VS Code to Use Custom Fonts

Now that you have copied the font files to the custom font directory, you need to configure VS Code to use these fonts. To do this, open VS Code and go to File > Preferences > Settings. In the settings search bar, type font and look for the Editor: Font Family setting. Set this to the name of the font you want to use.

For example, if you want to use the Fira Code font, set the Editor: Font Family setting to "Fira Code".

• Flatpak applications, including VS Code, run in an isolated environment and cannot access font files installed in the host system.
• To make Flatpak VS Code use fonts from ~/.fonts, you need to create a custom font directory inside the Flatpak environment and copy the font files from ~/.fonts to this directory.
• You can use the flatpak run and rsync commands to create the custom font directory and copy the font files.
• Once you have copied the font files, you can configure VS Code to use these fonts by setting the Editor: Font Family setting in the VS Code settings.

References

• Flatpak Sandbox Overrides
• Arch Linux Fonts
• VS Code Settings