Fontify is a Visual Studio Code extension built by Avinash Gupta (alias tier3guy), designed to inject custom fonts and UI enhancements directly into VS Code.

With Fontify, you can personalize your coding experience — apply your favorite fonts globally, fine-tune font weights and UI elements, and make your workspace visually consistent without manual tweaks.

⚠️ Note: Fontify automatically installs and configures Custom CSS and JS Loader if not already installed.

✨ Font Customization

• Apply a custom font (like Inter, Fira Code, or JetBrains Mono) across the entire VS Code interface.
• Adjust font weights and letter spacing for better readability.

🎛️ UI Enhancements

• Clean, minimal scrollbars for a smoother feel.
• Subtle transparency in sidebars and panels.
• Optional emoji or icon prefixes for headers and panels.
• Adjust spacing, padding, and text rendering to improve clarity.

🧩 Dynamic Controls

• Enable or disable Fontify on demand.
• Instantly apply or remove injected CSS without editing internal files.

🪄 Auto-Setup

• Automatically installs and configures the Custom CSS and JS Loader dependency.
• Handles required permissions and CSS injections seamlessly.

1. Open VS Code.
2. Go to the Extensions panel.
3. Search for Fontify.
4. Click Install.

If installing manually:

1. Download the .vsix file from the Releases page.
2. Open the Command Palette → Extensions: Install from VSIX...
3. Select the .vsix file.

Once installed, Fontify will automatically configure the required Custom CSS and JS Loader extension.

Fontify injects a stylesheet (custom-vscode-config.css) into VS Code using the Custom CSS and JS Loader extension.
This stylesheet overrides default styles — including fonts, scrollbars, headers, and panels — to create a more polished and consistent look.

The injected file lives at:

media/custom-vscode-config.css

Fontify enables or disables this file dynamically using VS Code commands.

After installation:

1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
2. Run one of the following commands:

💡 Restart VS Code when prompted to apply or remove changes.

Fontify currently applies the Inter font by default.
You can modify or replace it manually via the injected CSS file:

Edit media/custom-vscode-config.css:

:root {
  --vscode-font-family: 'Fira Code', monospace !important;
}

body, .monaco-editor, .part.editor, .monaco-workbench {
  font-family: 'Fira Code', monospace !important;
  font-weight: 450;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
}

Default VS Code	With Fontify

To run Fontify locally for development or debugging:

# Clone the repository
git clone https://github.com/tier3guy/Fontify.git
cd Fontify

# Install dependencies
npm install

# Open in VS Code
code .

# Launch extension development host
Press F5

In the new window (Extension Development Host):

• Run Enable Fontify or Disable Fontify from the Command Palette to test your changes.

1. Make sure Custom CSS and JS Loader is enabled.
2. Check VS Code settings for vscode_custom_css.imports — Fontify should automatically add the CSS file path.
3. Try disabling and re-enabling Fontify.

This is a false warning caused by VS Code’s integrity check after CSS injection. Fontify modifies the internal styles, but the editor remains safe to use. To suppress this:

1. Click “Don’t Show Again” on the warning.
2. Restart VS Code.

Ensure the desired font is installed on your system. Fontify only applies the CSS — it doesn’t download the font automatically.

Fontify/
 ┣ media/
 ┃ ┗ custom-vscode-config.css   # Injected general UI stylesheet
 ┃ ┗ emoji.css   # Injected emojis stylesheet
 ┣ src/
 ┃ ┣ test/
 ┃ ┣ extension.ts                 # Core logic (enable/disable commands)
 ┃ ┣ utils.ts
 ┣ package.json                   # Extension manifest
 ┣ README.md                      # You are here
 ┗ LICENSE

Contributions, ideas, and feature requests are always welcome.

1. Fork the repository
2. Create a new branch
3. Make your changes
4. Run tests / verify locally
5. Submit a Pull Request 🚀

If you’d like to suggest UI tweaks or additional font presets, open an issue under the Fontify GitHub Issues page.

If you find a bug, please include:

• Steps to reproduce
• Your OS and VS Code version
• Any console errors or logs

Report issues here: 👉 https://github.com/tier3guy/Fontify/issues

Avinash Gupta (tier3guy) 💼 LinkedIn 💻 GitHub 🌐 Website

This project is licensed under the MIT License. See the LICENSE file for more details.

If Fontify makes your editor look better, consider giving it a ⭐ on GitHub — it helps more developers discover it. 👉 https://github.com/tier3guy/Fontify