# How the Google Fonts Toggle Works in Draw.io Desktop: Implementation and Persistence Guide

> Discover how Draw.io Desktop implements and persists the Google Fonts toggle. Learn about electron-store, CSP headers, and IPC communication for seamless font management.

- Repository: [draw.io/drawio-desktop](https://github.com/jgraph/drawio-desktop)
- Tags: internals
- Published: 2026-03-05

---

**The Google Fonts toggle in Draw.io Desktop persists user preferences using `electron-store` under the key `isGoogleFontsEnabled`, dynamically modifies Content-Security-Policy headers to control external font loading, and manages state through secure IPC communication between the renderer and main process.**

The jgraph/drawio-desktop repository implements a privacy-centric Google Fonts toggle that allows users to enable or disable external font loading while maintaining persistence across application sessions. This feature demonstrates secure Electron patterns by isolating file system access to the main process and dynamically adjusting security policies based on user consent. The implementation spans the main process logic, preload scripts, and Content-Security-Policy enforcement.

## Initializing the Google Fonts Setting from Storage

When the application launches, it immediately retrieves the persisted preference to determine whether Google Fonts should be available during the session.

### Reading the Stored Preference

In [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js) (lines 94-95), the application initializes a module-scoped variable by reading from the `electron-store` instance:

```javascript
// Initial load from persistent storage
let isGoogleFontsEnabled = store.get('isGoogleFontsEnabled', false);

```

The `store.get()` method accepts a default value of `false`, ensuring that Google Fonts remain disabled unless the user explicitly opts in. This module-scoped variable serves as the source of truth for the entire main process during the application lifecycle.

## IPC Communication Architecture

The toggle mechanism relies on Electron's inter-process communication (IPC) to safely bridge the renderer process (UI) with the main process (file system access).

### The Main Process Handler

The core toggle logic resides in [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js) (lines 1011-1022) within the `toggleGoogleFonts` function:

```javascript
function toggleGoogleFonts(e) {
    if (e != null && !validateSender(e.senderFrame)) return null;

    if (store != null) {
        isGoogleFontsEnabled = !isGoogleFontsEnabled;
        store.set('isGoogleFontsEnabled', isGoogleFontsEnabled);
    }
}
ipcMain.on('toggleGoogleFonts', toggleGoogleFonts);

```

The handler first validates the sender using `validateSender(e.senderFrame)` to prevent unauthorized IPC calls from compromised renderer contexts. Upon validation, it flips the boolean state and immediately persists the new value to `electron-store` using `store.set('isGoogleFontsEnabled', isGoogleFontsEnabled)`.

### Preload Script Bridge

To expose this functionality securely to the UI, [`src/main/electron-preload.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron-preload.js) uses `contextBridge` to create a controlled API surface:

```javascript
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
    toggleGoogleFonts: () => ipcRenderer.send('toggleGoogleFonts')
});

```

This pattern prevents the renderer from accessing Node.js or Electron modules directly while allowing controlled communication through the `window.electronAPI.toggleGoogleFonts()` method.

## Content Security Policy Enforcement

The Google Fonts toggle directly impacts the application's security posture by dynamically modifying the Content-Security-Policy (CSP) headers based on the current state.

### Dynamic CSP Header Construction

In [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js) (lines 382-384), the application constructs CSP headers within the `onHeadersReceived` web request handler:

```javascript
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
        responseHeaders: {
            ...details.responseHeaders,
            'Content-Security-Policy': [
                'default-src \'self\'; script-src \'self\' ...' +
                (isGoogleFontsEnabled ? ' https://fonts.googleapis.com https://fonts.gstatic.com' : '') +
                '; img-src * data:; media-src *; font-src * data:; ...'
            ]
        }
    });
});

```

When `isGoogleFontsEnabled` evaluates to `true`, the CSP header explicitly includes `https://fonts.googleapis.com` and `https://fonts.gstatic.com` in the allowed origins. When disabled, these external domains are omitted from the policy, effectively blocking all Google Fonts network requests regardless of HTML or CSS content.

## Persistence Across Application Sessions

The `electron-store` module ensures that user preferences survive application restarts without manual configuration file management. Because the setting is written to disk immediately upon toggling via `store.set()`, the preference is available on next launch when `store.get('isGoogleFontsEnabled', false)` executes during initialization. This creates a seamless experience where the user's privacy and font preferences are automatically restored without additional interaction.

## Summary

- **Storage Key**: The preference is stored as `isGoogleFontsEnabled` in `electron-store`, defaulting to `false` for privacy protection.
- **Security Validation**: The `toggleGoogleFonts` handler in [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js) validates the sender frame before processing state changes.
- **CSP Integration**: The toggle dynamically includes or excludes `fonts.googleapis.com` and `fonts.gstatic.com` from Content-Security-Policy headers.
- **Secure API**: The preload script exposes the toggle functionality via `contextBridge`, preventing direct Node.js access from the renderer.
- **Immediate Persistence**: Changes are written to disk instantly using `store.set()`, ensuring state survives crashes and restarts.

## Frequently Asked Questions

### Where is the Google Fonts preference stored in Draw.io Desktop?

The preference is stored in the application's `electron-store` instance under the key `isGoogleFontsEnabled`. This JSON-based store persists the boolean value to the user's local file system, making it available across application restarts without requiring manual configuration file editing.

### Which source files handle the Google Fonts toggle functionality?

The implementation spans two primary files: [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js) contains the IPC handler, persistence logic, and CSP construction (lines 94-95, 382-384, and 1011-1022), while [`src/main/electron-preload.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron-preload.js) exposes the secure API bridge to the renderer process using `contextBridge`.

### How does the toggle affect application security?

When disabled, the application omits Google Fonts domains from the Content-Security-Policy headers, preventing the renderer from loading external font resources regardless of diagram content. When enabled, the CSP headers explicitly allow `fonts.googleapis.com` and `fonts.gstatic.com`, permitting external font fetching while maintaining other security restrictions.

### What happens if the Google Fonts setting is toggled while diagrams are open?

The change takes effect immediately for all subsequent network requests. The `isGoogleFontsEnabled` variable is updated in the main process, and the CSP headers are dynamically constructed for every web request, meaning newly loaded fonts will respect the updated setting without requiring an application restart.