### Search and Import Fonts using SuggestModal (TypeScript)

Source: https://context7.com/fontsource/obsidian-fontsource/llms.txt

The `SearchModal` class extends Obsidian's `SuggestModal` to provide an interface for searching and importing fonts from the Fontsource API. It fetches the complete font list, caches it for performance, and allows users to filter by name. Upon selection, it imports the chosen font using the `importFont` utility, updates the plugin settings, and refreshes the UI. Error handling is included for import failures.

```typescript
import { SuggestModal, requestUrl, Notice } from 'obsidian';

const getFontlist = async (): Promise<Font[]> => {
  const response = await requestUrl(
    'https://api.fontsource.org/fontlist?family'
  ).json as Record<string, string>;

  return Object.entries(response).map(([id, family]) => ({ id, family }));
};

export class SearchModal extends SuggestModal<Font> {
  private plugin: FontsourcePlugin;
  private listCache: Font[];  // Cache font list
  private refresh: () => void;

  constructor(app: App, plugin: FontsourcePlugin, refresh: () => void) {
    super(app);
    this.plugin = plugin;
    this.refresh = refresh;
    this.inputEl.placeholder = 'Select to import a font...';
    this.emptyStateText = 'No fonts found.';
    this.limit = 2500;
  }

  async getSuggestions(query: string): Promise<Font[]> {
    if (!this.listCache) {
      this.listCache = await getFontlist();
    }
    return this.listCache.filter((font) =>
      font.family.toLowerCase().includes(query.toLowerCase())
    );
  }

  renderSuggestion(item: Font, el: HTMLElement): void {
    el.setText(item.family);
  }

  async onChooseSuggestion(font: Font) {
    new Notice(`Importing ${font.family}...`);
    try {
      const metadata = await importFont(font.id, this.plugin);

      // Add to settings (replace if exists)
      this.plugin.settings.fonts = this.plugin.settings.fonts
        .filter((f) => f.id !== metadata.id)
        .concat(metadata);
      await this.plugin.saveSettings();

      this.refresh();
      new Notice(`Imported ${font.family}.`);
    } catch (error) {
      console.error('Error importing font:', error);
      new Notice(`Unable to import ${font.family}.`);
    }
  }
}
```

--------------------------------

### Manage Plugin Lifecycle and Settings with FontsourcePlugin

Source: https://context7.com/fontsource/obsidian-fontsource/llms.txt

The FontsourcePlugin class handles the initialization of settings, loading of active fonts upon startup, and cleanup of DOM elements when the plugin is unloaded. It serves as the main entry point for the plugin's lifecycle within the Obsidian environment.

```typescript
import { Plugin } from 'obsidian';

interface PluginSettings {
  fonts: SettingsMetadata[];        // All imported fonts
  interfaceFonts: SettingsPrecedence[];  // Fonts for UI elements
  textFonts: SettingsPrecedence[];       // Fonts for reading/editing views
  monospaceFonts: SettingsPrecedence[];  // Fonts for code blocks
}

export default class FontsourcePlugin extends Plugin {
  settings: PluginSettings;

  async onload() {
    await this.loadSettings();
    this.addSettingTab(new FontsourceSettingsTab(this.app, this));

    // Apply CSS for all active fonts on startup
    for (const font of this.settings.fonts) {
      if (font.isActive) {
        applyCss(font.id, this);
      }
    }
    updateCssVariables(this);
  }

  async loadSettings() {
    this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
  }

  async saveSettings() {
    await this.saveData(this.settings);
  }

  async onunload() {
    // Remove CSS variables and loaded fonts from DOM
    document.getElementById('fontsource-css-variables')?.remove();
    for (const font of this.settings.fonts) {
      document.getElementById(`fontsource-${font.id}`)?.remove();
    }
  }
}
```

--------------------------------

### Import and Process Fonts with importFont

Source: https://context7.com/fontsource/obsidian-fontsource/llms.txt

The importFont function fetches font metadata from the Fontsource API, downloads font files as base64 strings using a concurrent queue, and generates the necessary CSS files. It saves the resulting font data into the Obsidian vault for later use.

```typescript
import { arrayBufferToBase64, requestUrl } from 'obsidian';
import PQueue from 'p-queue';

// Concurrent download queue for performance
const queue = new PQueue({ concurrency: 12 });

const importFont = async (
  id: string,
  plugin: FontsourcePlugin
): Promise<SettingsMetadata> => {
  // Step 1: Fetch font metadata from Fontsource API
  const metadata = await requestUrl(`https://api.fontsource.org/v1/fonts/${id}`).json;

  // Step 2: Check for variable font axes
  let variable;
  if (metadata.variable) {
    const variableResponse = await requestUrl(
      `https://api.fontsource.org/v1/variable/${id}`
    ).json;
    variable = variableResponse.axes;
  }

  // Step 3: Download font files as base64
  const fontMetadata = {
    id: metadata.id,
    family: metadata.family,
    subsets: metadata.subsets,
    styles: metadata.styles,
    weights: metadata.weights,
    variable,
    base64: {},
    unicodeRange: metadata.unicodeRange,
  };

  // Download all font variants concurrently
  for (const style of fontMetadata.styles) {
    for (const weight of fontMetadata.weights) {
      for (const subset of Object.keys(fontMetadata.unicodeRange)) {
        const key = `${subset}-${weight}-${style}`;
        const url = `https://cdn.jsdelivr.net/fontsource/fonts/${id}@latest/${key}.woff2`;
        queue.add(() =>
          downloadFileToBase64(url).then(base64 => {
            fontMetadata.base64[key] = base64;
          })
        );
      }
    }
  }

  // Step 4: Generate and save CSS
  const css = generateCss(fontMetadata);
  const vault = plugin.app.vault;
  await vault.adapter.mkdir(`${vault.configDir}/fonts`);
  await vault.adapter.write(`${vault.configDir}/fonts/${id}.css`, css);

  return {
    id: fontMetadata.id,
    family: fontMetadata.family,
    subsets: fontMetadata.subsets,
    styles: fontMetadata.styles,
    weights: fontMetadata.weights,
    variable: fontMetadata.variable,
    isActive: false,
  };
};
```

--------------------------------

### Define Font Metadata and Settings Interfaces

Source: https://context7.com/fontsource/obsidian-fontsource/llms.txt

Defines the core TypeScript interfaces for font metadata, including base properties, variable font axes, and settings for font precedence. These structures are used to manage font state, display properties, and CSS fallback ordering within the Obsidian vault.

```typescript
interface BaseMetadata {
  id: string;
  family: string;
  subsets: string[];
  styles: string[];
  weights: number[];
  variable?: {
    wght?: { min: number; max: number };
    stretch?: { min: number; max: number };
    slnt?: { min: number; max: number };
  };
}

interface SettingsMetadata extends BaseMetadata {
  isActive: boolean;
}

interface SettingsPrecedence {
  family: string;
  id: string;
  precedence: number;
}

interface FontMetadata extends BaseMetadata {
  base64: Record<string, string>;
  unicodeRange: Record<string, string>;
}

type FontType = 'interface' | 'text' | 'monospace';
```

--------------------------------

### Apply and remove font stylesheets from DOM

Source: https://context7.com/fontsource/obsidian-fontsource/llms.txt

These functions manage the injection and removal of CSS stylesheets into the document head. applyCss reads the CSS from the vault and creates or updates a style element, while removeCss deletes the element by its unique ID.

```typescript
const applyCss = async (id: string, plugin: FontsourcePlugin) => {
  const existing = document.getElementById(`fontsource-${id}`);
  const css = await plugin.app.vault.adapter.read(
    `${plugin.app.vault.configDir}/fonts/${id}.css`
  );

  if (existing) {
    existing.replaceWith(css);
  } else {
    const style = document.createElement('style');
    style.id = `fontsource-${id}`;
    style.textContent = css;
    document.head.appendChild(style);
  }
};

const removeCss = (id: string) => {
  const existing = document.getElementById(`fontsource-${id}`);
  if (existing) {
    existing.remove();
  }
};
```

--------------------------------

### Generate CSS @font-face rules from metadata

Source: https://context7.com/fontsource/obsidian-fontsource/llms.txt

The generateCss function processes font metadata to create CSS @font-face strings. It handles both variable fonts and static font files by iterating through weights, styles, and subsets to produce base64-encoded font declarations.

```typescript
import { generateFontFace } from '@fontsource-utils/generate';

const generateCss = (metadata: FontMetadata): string => {
  let css = '';
  const subsets = Object.keys(metadata.unicodeRange);

  if (metadata.variable) {
    for (const style of metadata.styles) {
      for (const subset of subsets) {
        css += generateFontFace({
          family: metadata.family,
          style,
          weight: 400,
          display: 'auto',
          src: [{
            url: `data:font/woff2;base64,${metadata.base64[`${subset}-${style}`]}`,
            format: 'woff2-variations',
          }],
          unicodeRange: metadata.unicodeRange[subset],
          variable: {
            wght: metadata.variable.wght,
            stretch: metadata.variable.stretch,
            slnt: metadata.variable.slnt,
          },
          comment: `${metadata.id}-variable-${style}`,
        });
      }
    }
  } else {
    for (const style of metadata.styles) {
      for (const weight of metadata.weights) {
        for (const subset of subsets) {
          css += generateFontFace({
            family: metadata.family,
            style,
            weight,
            display: 'auto',
            src: [{
              url: `data:font/woff2;base64,${metadata.base64[`${subset}-${weight}-${style}`]}`,
              format: 'woff2',
            }],
            unicodeRange: metadata.unicodeRange[subset],
            comment: `${metadata.id}-${weight}-${style}`,
          });
        }
      }
    }
  }
  return css;
};
```

--------------------------------

### Update Obsidian CSS Variables with Custom Fonts (TypeScript)

Source: https://context7.com/fontsource/obsidian-fontsource/llms.txt

The `updateCssVariables` function dynamically generates and applies CSS custom properties to Obsidian's `body` element. It takes font family arrays, sorts them by precedence, and creates fallback chains for interface, text, and monospace fonts. This ensures selected fonts are applied consistently across the application, with support for multi-language fallback. It handles the creation, update, and removal of a dedicated style element in the document's head.

```typescript
const extractFontFamilies = (fonts: SettingsPrecedence[]) =>
  fonts
    .sort((a, b) => {
      if (a.precedence === b.precedence) {
        return a.family.localeCompare(b.family);
      }
      return a.precedence - b.precedence;
    })
    .map((font) => `'${font.family}'`)
    .join(', ');

const updateCssVariables = (plugin: FontsourcePlugin) => {
  const { interfaceFonts, textFonts, monospaceFonts } = plugin.settings;

  // Generate font-family strings from precedence-sorted arrays
  const interfaceFont = extractFontFamilies(interfaceFonts);
  const textFont = extractFontFamilies(textFonts);
  const monospaceFont = extractFontFamilies(monospaceFonts);

  // Build CSS with Obsidian's override variables
  const cssText = `
    ${interfaceFont ? `--font-interface-override: ${interfaceFont};` : ''}
    ${textFont ? `--font-text-override: ${textFont};` : ''}
    ${textFont ? `--font-print-override: ${textFont};` : ''}
    ${monospaceFont ? `--font-monospace-override: ${monospaceFont};` : ''}
  `;

  // Apply to DOM
  let style = document.getElementById('fontsource-css-variables');
  if (cssText.trim() === '') {
    style?.remove();
    return;
  }

  if (!style) {
    style = document.createElement('style');
    style.id = 'fontsource-css-variables';
    document.head.appendChild(style);
  }
  style.textContent = `body { ${cssText} }`;
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.