Skip to content

Typography & Fonts

Overview

The Flowcode application uses Poppins as the primary font family across all components and interfaces. This includes the main application, all Filament admin panels, Vue.js components, charts, and rich text editors.

Current Font Configuration

Primary Font: Poppins

The application previously used Inter font but has been migrated to Poppins for improved readability and visual consistency. Poppins is loaded from Google Fonts with full weight and style support (100-900, normal and italic).

Font Loading

Poppins is loaded via Google Fonts CSS import in the main application stylesheet:

// Import Poppins font
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
html {
    font-family: "Poppins", sans-serif;
}

Font Usage Areas

1. Main Application (Frontend)

Location: resources/sass/app.scss

The global HTML font-family is set to Poppins, which cascades to all frontend components unless specifically overridden.

2. Filament Admin Panels

Configuration: Centralized via SharedFilamentPlugins::getGlobalFont()

All six Filament panels use the shared font configuration:

  • AdminPanelProvider - Main admin management
  • AppPanelProvider - Application management
  • OrganisationPanelProvider - Organisation settings
  • CreatorPanelProvider - Content creation panel
  • TenantClusterPanelProvider - Tenant group management
  • TenantPortfolioPanelProvider - Tenant portfolio management

Each panel calls:

->font(SharedFilamentPlugins::getGlobalFont())

3. Vue.js Chart Components

Location: resources/ts/Components/App/Common/Charts/

43+ custom SVG chart components use Poppins for all text elements:

<text style="font-family: Poppins, sans-serif">

4. Rich Text Editors

CKEditor Configuration

Files:

  • resources/ts/Components/Common/Fields/FieldEditor.vue
  • resources/ts/Components/Common/Forms/FormEditor.vue

Font family options configured for CKEditor:

fontFamily: {
    options: ["Poppins"],
    supportAllValues: false,
}

TinyEditor Configuration

File: config/filament-forms-tinyeditor.php

'font_formats' => 'Poppins=Poppins',
'content_style' => "@import url('https://fonts.googleapis.com/css2?family=Poppins:...');
                   body { font-family: Poppins, sans-serif; }"

Centralized Font Management

Global Font Configuration

File: app/Providers/Filament/SharedFilamentPlugins.php

/**
 * Get the global font configuration for all panels
 */
public static function getGlobalFont(): string
{
    return 'Poppins';
}

This centralized approach ensures:

  • ✅ Single Source of Truth: One place to change fonts globally
  • ✅ Consistency: All panels use the same font
  • ✅ Maintainability: Easy to update in the future

Changing the Global Font

To change the application font in the future:

1. Update the Global Configuration

Modify the return value in SharedFilamentPlugins::getGlobalFont():

public static function getGlobalFont(): string
{
    return 'Roboto'; // or any Google Font name
}

2. Update Main Application Stylesheet

Update the font import and CSS in resources/sass/app.scss:

// Import new font
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap");
html {
    font-family: "Roboto", sans-serif;
}

3. Update Rich Text Editor Configurations

Update the font configurations in:

  • config/filament-forms-tinyeditor.php
  • CKEditor font options in Vue components

4. Verify Chart Components

Ensure Vue.js chart components use the new font in their SVG text elements.

Font Migration History

v2025.01.15 - Inter to Poppins Migration

Scope: Complete application-wide font migration

Changed Components:

  • Main application SCSS (global HTML font-family)
  • All 6 Filament panel providers
  • 43+ Vue.js chart components
  • CKEditor configurations (2 files)
  • TinyEditor configuration
  • CSS style blocks in Vue components

Migration Method:

  1. Updated core font infrastructure
  2. Implemented centralized Filament font configuration
  3. Systematic component-by-component updates
  4. Comprehensive verification testing

Best Practices

For Developers

  1. Use the Global Configuration: Always reference SharedFilamentPlugins::getGlobalFont() for Filament panels
  2. Consistent Implementation: Use font-family: Poppins, sans-serif in custom CSS
  3. Test Across Interfaces: Verify font changes in all application areas
  4. Documentation: Update this documentation when making font changes

For Font Selection

  1. Google Fonts Preferred: Use Google Fonts for consistent loading and availability
  2. Full Weight Support: Ensure the chosen font supports multiple weights (100-900)
  3. Fallback Fonts: Always include sans-serif as fallback
  4. Performance: Consider font loading performance and file sizes

Troubleshooting

Font Not Loading

  1. Check Network: Verify Google Fonts CDN accessibility
  2. CSS Syntax: Ensure proper CSS import syntax
  3. Cache: Clear browser cache after font changes
  4. Console Errors: Check browser console for font loading errors

Inconsistent Font Display

  1. Global Configuration: Verify SharedFilamentPlugins::getGlobalFont() is being used
  2. CSS Specificity: Check for CSS rules overriding the font-family
  3. Component Updates: Ensure all components reference the correct font
  4. Editor Configuration: Verify rich text editor font settings

Technical Notes

  • Font Provider: Google Fonts (GDPR-compliant via Bunny Fonts CDN in Filament)
  • Loading Method: CSS @import for main app, Filament's built-in font loading for panels
  • Fallback Strategy: sans-serif system font as fallback
  • Performance: Fonts loaded with display=swap for optimal performance