@womp/kookie-ui 0.3.26 → 0.4.0

package/src/helpers/font-config.ts

@@ -1,194 +1,176 @@
 /**
- * Font configuration utilities for Kookie UI
+ * Runtime font configuration for Kookie UI.
  *
- * These utilities help users configure custom fonts through CSS variables
- * and provide type-safe font configuration options.
+ * This is a thin, typed wrapper over the CSS tokens in `styles/tokens/font-family.css` —
+ * it writes the same variables you would write by hand, and nothing else. Prefer plain CSS
+ * where you can; reach for this when the stacks are only known at runtime (a theme editor,
+ * a user-selectable typeface).
+ *
+ * Two tiers, matching the CSS:
+ *
+ *   - `stacks` — which typefaces exist: `sans`, `mono`, `serif`. Written to `:root`.
+ *   - `roles`  — which stack each role uses: `body`, `heading`, `code`, `strong`, `em`,
+ *                `quote`. Written to the theme element, since roles are per-theme.
  */
 
-/**
- * Font family configuration interface
- */
-export interface FontConfig {
-  /** Sans-serif font stack for fontFamily="sans" */
+/** Tier 1 — the typefaces available to the theme. */
+export interface FontStacks {
+  /** Sans-serif stack. Backs `font="sans"` and, by default, body text. */
   sans?: string;
-  /** Monospace font stack for fontFamily="mono" */
+  /** Monospace stack. Backs `font="mono"` and `Code`. */
   mono?: string;
-  /** Serif font stack for fontFamily="serif" */
+  /** Serif stack. Backs `font="serif"`, `Em` and `Quote`. */
   serif?: string;
-  /** Base Inter font replacement */
-  inter?: string;
-  /** Base JetBrains Mono font replacement */
-  jetbrainsMono?: string;
-  /** Base Playfair Display font replacement */
-  playfairDisplay?: string;
 }
 
-/**
- * CSS variable names used by Kookie UI for fonts
- */
-export const FONT_CSS_VARIABLES = {
+/** Tier 2 — which stack each role of text uses. */
+export interface FontRoles {
+  /** Body text: `Text`, inputs, buttons, and anything that does not opt out. */
+  body?: string;
+  /** `Heading`. Follows `body` when left unset. */
+  heading?: string;
+  /** `Code`. */
+  code?: string;
+  /** `Strong`. */
+  strong?: string;
+  /** `Em`. */
+  em?: string;
+  /** `Quote`. */
+  quote?: string;
+}
+
+export interface FontConfig {
+  stacks?: FontStacks;
+  roles?: FontRoles;
+}
+
+/** CSS custom properties backing each stack. Declared on `:root`. */
+export const FONT_STACK_VARIABLES = {
   sans: '--font-sans',
   mono: '--font-mono',
   serif: '--font-serif',
-  inter: '--font-inter',
-  jetbrainsMono: '--font-jetbrains-mono',
-  playfairDisplay: '--font-playfair-display',
-  defaultFamily: '--default-font-family',
-  headingFamily: '--heading-font-family',
-  strongFamily: '--strong-font-family',
-  codeFamily: '--code-font-family',
-} as const;
+} as const satisfies Record<keyof FontStacks, `--font-${string}`>;
+
+/** CSS custom properties backing each role. Declared on the theme element. */
+export const FONT_ROLE_VARIABLES = {
+  body: '--font-body',
+  heading: '--font-heading',
+  code: '--font-code',
+  strong: '--font-strong',
+  em: '--font-em',
+  quote: '--font-quote',
+} as const satisfies Record<keyof FontRoles, `--font-${string}`>;
 
 /**
- * Popular font stacks for common use cases
+ * Ready-made stacks, each ending in a system fallback.
+ *
+ * The webfont entries assume the face is already loaded — via
+ * `import '@womp/kookie-ui/fonts.css'`, `next/font`, or your own `@font-face`.
+ * Kookie's core stylesheet deliberately loads none.
  */
 export const FONT_STACKS = {
-  // Sans-serif options
-  inter: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-  system: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-  poppins: "'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
-  openSans: "'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
-
-  // Monospace options
-  jetbrainsMono: "'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace",
-  firaCode: "'Fira Code', 'JetBrains Mono', 'Consolas', 'Liberation Mono', monospace",
-  sourceCodePro: "'Source Code Pro', 'JetBrains Mono', 'Consolas', monospace",
-  systemMono: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace",
-
-  // Serif options
-  playfair: "'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif",
-  times: "'Times New Roman', 'Times', 'Georgia', 'Cambria', serif",
+  // Sans
+  system: "-apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', system-ui, sans-serif",
+  inter: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, system-ui, sans-serif",
+  poppins: "'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+  openSans: "'Open Sans (Custom)', -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+
+  // Mono
+  systemMono: "'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace",
+  jetbrainsMono: "'JetBrains Mono', 'Menlo', 'Consolas (Custom)', monospace",
+  firaCode: "'Fira Code', 'Menlo', 'Consolas (Custom)', monospace",
+  sourceCodePro: "'Source Code Pro', 'Menlo', 'Consolas (Custom)', monospace",
+
+  // Serif
+  systemSerif: "'Times New Roman', 'Times', 'Georgia', 'Cambria', serif",
+  playfair: "'Playfair Display', 'Times New Roman', 'Georgia', serif",
   georgia: "'Georgia', 'Times New Roman', 'Times', serif",
-  lora: "'Lora', 'Times New Roman', 'Times', serif",
+  lora: "'Lora', 'Georgia', 'Times New Roman', serif",
 } as const;
 
-/**
- * Apply font configuration to CSS variables
- *
- * @param config Font configuration object
- * @param target Target element (defaults to document.documentElement)
- *
- * @example
- * ```ts
- * // Use Google Fonts
- * applyFontConfig({
- *   sans: FONT_STACKS.poppins,
- *   mono: FONT_STACKS.firaCode
- * });
- *
- * // Use system fonts only
- * applyFontConfig({
- *   sans: FONT_STACKS.system,
- *   mono: FONT_STACKS.systemMono
- * });
- * ```
- */
-export function applyFontConfig(config: FontConfig, target: HTMLElement = document.documentElement): void {
-  const style = target.style;
-
-  if (config.sans) {
-    style.setProperty(FONT_CSS_VARIABLES.sans, config.sans);
-  }
-
-  if (config.mono) {
-    style.setProperty(FONT_CSS_VARIABLES.mono, config.mono);
-  }
-
-  if (config.serif) {
-    style.setProperty(FONT_CSS_VARIABLES.serif, config.serif);
-  }
-
-  if (config.inter) {
-    style.setProperty(FONT_CSS_VARIABLES.inter, config.inter);
-  }
-
-  if (config.jetbrainsMono) {
-    style.setProperty(FONT_CSS_VARIABLES.jetbrainsMono, config.jetbrainsMono);
+function write<K extends string>(target: HTMLElement, variables: Record<K, string>, values: Partial<Record<K, string>>) {
+  for (const key of Object.keys(variables) as K[]) {
+    const value = values[key];
+    if (value) target.style.setProperty(variables[key], value);
   }
+}
 
-  if (config.playfairDisplay) {
-    style.setProperty(FONT_CSS_VARIABLES.playfairDisplay, config.playfairDisplay);
+function clear(target: HTMLElement, variables: Record<string, string>) {
+  for (const variable of Object.values(variables)) {
+    target.style.removeProperty(variable);
   }
 }
 
 /**
- * Generate CSS string for font configuration
+ * Apply a font configuration.
  *
- * @param config Font configuration object
- * @returns CSS string that can be injected into a stylesheet
+ * Stacks land on `:root` and roles on `themeElement`, mirroring where the stylesheet
+ * declares them — writing a role to `:root` would not survive, because the theme
+ * element declares its own.
  *
  * @example
  * ```ts
- * const css = generateFontCSS({
- *   sans: FONT_STACKS.poppins,
- *   mono: FONT_STACKS.firaCode
+ * // Serif headings over a sans body
+ * applyFontConfig({
+ *   stacks: { sans: FONT_STACKS.inter, serif: FONT_STACKS.playfair },
+ *   roles: { heading: 'var(--font-serif)' },
  * });
- *
- * // Inject into document
- * const style = document.createElement('style');
- * style.textContent = css;
- * document.head.appendChild(style);
  * ```
  */
-export function generateFontCSS(config: FontConfig): string {
-  const rules: string[] = [':root {'];
-
-  if (config.sans) {
-    rules.push(`  ${FONT_CSS_VARIABLES.sans}: ${config.sans};`);
-  }
-
-  if (config.mono) {
-    rules.push(`  ${FONT_CSS_VARIABLES.mono}: ${config.mono};`);
-  }
-
-  if (config.serif) {
-    rules.push(`  ${FONT_CSS_VARIABLES.serif}: ${config.serif};`);
-  }
+export function applyFontConfig(
+  config: FontConfig,
+  { root = document.documentElement, themeElement = document.querySelector<HTMLElement>('.radix-themes') }: { root?: HTMLElement; themeElement?: HTMLElement | null } = {},
+): void {
+  if (config.stacks) write(root, FONT_STACK_VARIABLES, config.stacks);
+  if (config.roles && themeElement) write(themeElement, FONT_ROLE_VARIABLES, config.roles);
+}
 
-  if (config.inter) {
-    rules.push(`  ${FONT_CSS_VARIABLES.inter}: ${config.inter};`);
-  }
+/**
+ * Render a font configuration as a CSS string, for injecting into a stylesheet or
+ * emitting server-side.
+ */
+export function generateFontCSS(config: FontConfig): string {
+  const blocks: string[] = [];
 
-  if (config.jetbrainsMono) {
-    rules.push(`  ${FONT_CSS_VARIABLES.jetbrainsMono}: ${config.jetbrainsMono};`);
+  const stacks = Object.entries(config.stacks ?? {}).filter(([, value]) => value);
+  if (stacks.length) {
+    blocks.push([':root {', ...stacks.map(([key, value]) => `  ${FONT_STACK_VARIABLES[key as keyof FontStacks]}: ${value};`), '}'].join('\n'));
   }
 
-  if (config.playfairDisplay) {
-    rules.push(`  ${FONT_CSS_VARIABLES.playfairDisplay}: ${config.playfairDisplay};`);
+  const roles = Object.entries(config.roles ?? {}).filter(([, value]) => value);
+  if (roles.length) {
+    blocks.push(['.radix-themes {', ...roles.map(([key, value]) => `  ${FONT_ROLE_VARIABLES[key as keyof FontRoles]}: ${value};`), '}'].join('\n'));
   }
 
-  rules.push('}');
-
-  return rules.join('\n');
+  return blocks.join('\n\n');
 }
 
-/**
- * Reset fonts to Kookie UI defaults
- */
-export function resetFonts(target: HTMLElement = document.documentElement): void {
-  const style = target.style;
-
-  // Remove custom font variables to fall back to defaults
-  style.removeProperty(FONT_CSS_VARIABLES.sans);
-  style.removeProperty(FONT_CSS_VARIABLES.mono);
-  style.removeProperty(FONT_CSS_VARIABLES.serif);
-  style.removeProperty(FONT_CSS_VARIABLES.inter);
-  style.removeProperty(FONT_CSS_VARIABLES.jetbrainsMono);
-  style.removeProperty(FONT_CSS_VARIABLES.playfairDisplay);
+/** Drop every inline font override, falling back to the stylesheet's defaults. */
+export function resetFonts({ root = document.documentElement, themeElement = document.querySelector<HTMLElement>('.radix-themes') }: { root?: HTMLElement; themeElement?: HTMLElement | null } = {}): void {
+  clear(root, FONT_STACK_VARIABLES);
+  if (themeElement) clear(themeElement, FONT_ROLE_VARIABLES);
 }
 
-/**
- * Get current font configuration from CSS variables
- */
-export function getCurrentFontConfig(target: HTMLElement = document.documentElement): FontConfig {
-  const computedStyle = getComputedStyle(target);
+/** Read the stacks and roles currently in effect. */
+export function getCurrentFontConfig({ themeElement = document.querySelector<HTMLElement>('.radix-themes') }: { themeElement?: HTMLElement | null } = {}): Required<FontConfig> {
+  // Roles resolve against the theme element, so read both tiers from it — it inherits
+  // the stacks from `:root` and is the only place the roles are declared.
+  const computed = getComputedStyle(themeElement ?? document.documentElement);
+  const read = (variable: string) => computed.getPropertyValue(variable).trim() || undefined;
 
   return {
-    sans: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.sans).trim() || undefined,
-    mono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.mono).trim() || undefined,
-    serif: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.serif).trim() || undefined,
-    inter: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.inter).trim() || undefined,
-    jetbrainsMono: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.jetbrainsMono).trim() || undefined,
-    playfairDisplay: computedStyle.getPropertyValue(FONT_CSS_VARIABLES.playfairDisplay).trim() || undefined,
+    stacks: {
+      sans: read(FONT_STACK_VARIABLES.sans),
+      mono: read(FONT_STACK_VARIABLES.mono),
+      serif: read(FONT_STACK_VARIABLES.serif),
+    },
+    roles: {
+      body: read(FONT_ROLE_VARIABLES.body),
+      heading: read(FONT_ROLE_VARIABLES.heading),
+      code: read(FONT_ROLE_VARIABLES.code),
+      strong: read(FONT_ROLE_VARIABLES.strong),
+      em: read(FONT_ROLE_VARIABLES.em),
+      quote: read(FONT_ROLE_VARIABLES.quote),
+    },
   };
 }

package/src/styles/fonts.css

@@ -1,35 +1,30 @@
-/* Inter, JetBrains Mono, and Playfair Display from Google Fonts */
+/***************************************************************************************************
+ *                                                                                                 *
+ * KOOKIE UI WEBFONTS — OPT-IN                                                                     *
+ *                                                                                                 *
+ * Kookie UI's core stylesheet ships no webfonts; it defaults to system stacks so that importing   *
+ * the library costs zero network requests. Import this file alongside it to get Kookie's own      *
+ * typefaces:                                                                                      *
+ *                                                                                                 *
+ *   import '@womp/kookie-ui/styles.css';                                                          *
+ *   import '@womp/kookie-ui/fonts.css';                                                           *
+ *                                                                                                 *
+ * This costs three render-blocking requests to Google Fonts. If you already load fonts yourself   *
+ * (`next/font`, a self-hosted @font-face, a CDN), skip this file and point the stacks at your     *
+ * own faces instead:                                                                              *
+ *                                                                                                 *
+ *   :root {                                                                                       *
+ *     --font-sans: var(--my-next-font), system-ui, sans-serif;                                    *
+ *   }                                                                                             *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
 
-/* Font Variables - Customize these to change fonts throughout your app */
 :root {
-  /* Base font definitions - these are the actual font stacks */
-  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-jetbrains-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
-  --font-playfair-display: 'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif;
-
-  /* Theme font family overrides - change these to customize fonts globally */
-  --font-sans: var(--font-inter); /* Override this for custom sans-serif */
-  --font-mono: var(--font-jetbrains-mono); /* Override this for custom monospace */
-  --font-serif: var(--font-playfair-display); /* Override this for custom serif */
-
-  /* Force proper font weight rendering */
-  font-synthesis: none; /* Prevent browser from synthesizing weights */
-}
-
-/* Radix Themes font weight enforcement */
-.radix-themes {
-  font-synthesis: none;
-  font-family: var(--default-font-family);
-}
-
-/* System font fallback for critical loading scenarios */
-@font-face {
-  font-family: 'System Fallback';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: block;
-  src: local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto');
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas (Custom)', 'Liberation Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --font-serif: 'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif;
 }

package/src/styles/index.css

@@ -1,4 +1,3 @@
-@import './fonts.css';
 @import './tokens/index.css';
 @import './breakpoints.css';
 @import './scrollbar.css';

package/src/styles/tokens/base.css

@@ -4,6 +4,7 @@
 @import './radius.css';
 @import './shadow.css';
 @import './transition.css';
+@import './font-family.css';
 @import './typography.css';
 @import './blur.css';
 @import './opacity.css';

package/src/styles/tokens/font-family.css

@@ -0,0 +1,263 @@
+/***************************************************************************************************
+ *                                                                                                 *
+ * TYPEFACES                                                                                       *
+ *                                                                                                 *
+ * This file is the single owner of every font-family decision in Kookie UI. Sizes, weights,       *
+ * line heights and letter spacing live in `typography.css`; nothing else declares a stack.        *
+ *                                                                                                 *
+ * There are exactly two tiers:                                                                    *
+ *                                                                                                 *
+ *   1. STACKS  — which typefaces exist. Three of them: --font-sans, --font-mono, --font-serif.    *
+ *                Declared on `:root`, because a typeface is an app-wide resource (and because     *
+ *                that is where `next/font` and friends put theirs). Override at `:root`.          *
+ *                                                                                                 *
+ *   2. ROLES   — which stack each piece of text uses: --font-body, --font-heading, --font-code,   *
+ *                --font-strong, --font-em, --font-quote. Declared on `.radix-themes`, because a   *
+ *                role is a per-theme decision that `<Theme fontFamily>` has to be able to switch  *
+ *                per subtree. Override at `.radix-themes`.                                        *
+ *                                                                                                 *
+ * No webfonts are loaded here. The defaults below are system stacks. To use Kookie's own          *
+ * typefaces (Inter / JetBrains Mono / Playfair Display), additionally import                      *
+ * '@womp/kookie-ui/fonts.css'.                                                                    *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+:root {
+  /* Tier 1: stacks. Override these to change every typeface in the system. */
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji';
+  --font-mono: 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --font-serif: 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif;
+}
+
+.radix-themes {
+  /* Tier 2: roles. Each one points at a stack. Override these to give a role its own typeface —
+     e.g. `--font-heading: var(--font-serif)` for serif headings over a sans body. */
+  --font-body: var(--font-sans);
+  --font-heading: var(--font-body); /* follows the body unless you say otherwise */
+  --font-code: var(--font-mono);
+  --font-strong: var(--font-body);
+  --font-em: var(--font-serif);
+  --font-quote: var(--font-serif);
+
+  /* Radix Themes names, kept as aliases of the roles above. Components read these, so overriding
+     either the Kookie role or the Radix name works — they are the same token, spelled twice. */
+  --default-font-family: var(--font-body);
+  --heading-font-family: var(--font-heading);
+  --code-font-family: var(--font-code);
+  --strong-font-family: var(--font-strong);
+  --em-font-family: var(--font-em);
+  --quote-font-family: var(--font-quote);
+
+  /* @deprecated Use --font-sans / --font-mono / --font-serif directly. */
+  --default-font-family-sans: var(--font-sans);
+  --default-font-family-mono: var(--font-mono);
+  --default-font-family-serif: var(--font-serif);
+}
+
+/* `<Theme fontFamily>` — sets the body role only. Heading follows it through --font-heading's
+   default, so a `--font-heading` override of yours survives a theme font switch. */
+[data-font-family='sans'] {
+  --font-body: var(--font-sans);
+}
+[data-font-family='mono'] {
+  --font-body: var(--font-mono);
+}
+[data-font-family='serif'] {
+  --font-body: var(--font-serif);
+}
+
+/* `<Theme headingFontFamily>` — sets the heading role independently of the body. */
+[data-heading-font-family='sans'] {
+  --font-heading: var(--font-sans);
+}
+[data-heading-font-family='mono'] {
+  --font-heading: var(--font-mono);
+}
+[data-heading-font-family='serif'] {
+  --font-heading: var(--font-serif);
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * METRIC OVERRIDES                                                                                *
+ *                                                                                                 *
+ * Fallback faces normalised to match the primary stack's metrics, so swapping a webfont for a    *
+ * system face does not reflow the page. Referenced by the default stacks above.                  *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 300;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semilight'), local('Segoe UI');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 300;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semilight Italic'), local('Segoe UI Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 400;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 400;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 500;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semibold'), local('Segoe UI');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 500;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semibold Italic'), local('Segoe UI Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 700;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Bold');
+}
+
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 700;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Bold Italic');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 300;
+  descent-override: 35%;
+  src: local('Open Sans Light'), local('Open Sans Regular');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 300;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Light Italic'), local('Open Sans Italic');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 400;
+  descent-override: 35%;
+  src: local('Open Sans Regular');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 400;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Italic');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 500;
+  descent-override: 35%;
+  src: local('Open Sans Medium'), local('Open Sans Regular');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 500;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Medium Italic'), local('Open Sans Italic');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 700;
+  descent-override: 35%;
+  src: local('Open Sans Bold');
+}
+
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 700;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Bold Italic');
+}
+
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 400;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas');
+}
+
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 400;
+  font-style: italic;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas Italic');
+}
+
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 700;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas Bold');
+}
+
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 700;
+  font-style: italic;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas Bold Italic');
+}