FontPreview Docs

Getting Started v3.0.0

FontPreview provides a set of powerful tools for previewing and comparing fonts directly in the browser, plus AI-powered brand analysis. All features are client-side and require no server configuration.

Installation

Add the following to your HTML file:

<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- FontPreview Core -->
<script src="https://fontpreview.online/js/fontpreview.min.js"></script>
<link rel="stylesheet" href="https://fontpreview.online/css/fontpreview.css">

Basic Usage

// Initialize FontPreview
const preview = new FontPreview({
    container: '#font-preview',
    text: 'Hello World',
    fontSize: 48,
    fonts: ['Roboto', 'Open Sans', 'Lato']
});

// Update preview
preview.setText('New text');
preview.setFontSize(64);

Preview API

The Preview API allows you to create interactive font previews with real-time updates. Perfect for design tools, CMS integrations, and custom typography interfaces.

Configuration Options

Example Implementation

<div id="preview-container"></div>

<script>
const preview = new FontPreview.Preview({
    container: '#preview-container',
    text: 'Design is thinking made visual',
    fontSize: 56,
    fonts: [
        'Inter',
        'Roboto',
        'Open Sans',
        'Montserrat'
    ],
    controls: {
        showSize: true,
        showWeight: true,
        showColor: true
    }
});
</script>

Brand Analyzer API

The Brand Analyzer API provides AI-powered sentiment analysis and brand archetype matching. Perfect for brand identity tools, marketing platforms, and design systems.

Basic Usage

// Initialize Brand Analyzer
const analyzer = new FontPreview.BrandAnalyzer({
    apiKey: 'YOUR_HUGGING_FACE_TOKEN', // Optional for client-side
    onAnalysisComplete: (result) => {
        console.log('Brand archetype:', result.archetype);
        console.log('Confidence score:', result.confidence);
    }
});

// Analyze brand description
analyzer.analyze('A sustainable luxury skincare brand that combines ancient herbal wisdom with modern science.');

Configuration Options

Response Format

{
    "archetype": "The Sage",
    "confidence": 94,
    "sentiment": {
        "label": "POSITIVE",
        "score": 0.98
    },
    "fontMatches": [
        {
            "name": "Inter",
            "score": 95,
            "reasoning": "Clean, objective forms reflect rational thinking"
        }
    ],
    "colors": ["#2563eb", "#0f172a", "#38bdf8", "#ffffff"]
}

Comparison Lab

The Comparison Lab enables side-by-side font comparison with system font support. Ideal for design reviews, client presentations, and typography education.

Implementation

<div id="comparison-lab"></div>

<script>
const lab = new FontPreview.Comparison({
    container: '#comparison-lab',
    leftFont: 'Arial',
    rightFont: 'Helvetica',
    text: 'Visual Hierarchy',
    enableSystemFonts: true
});
</script>

System Font Permission

To access system fonts, you need to request permission using the Local Font Access API. FontPreview handles this automatically, but you can customize the permission flow:

// Check permission status
const status = await FontPreview.checkFontPermission();

// Request permission
if (status === 'prompt') {
    await FontPreview.requestFontPermission();
}

Font Downloads

Enable users to download Google Fonts directly from your interface. All downloads include font files and licensing information.

Download Button

<button onclick="FontPreview.downloadFont('Roboto')">
    Download Roboto
</button>

Download Options

API Reference

Response Format (Fonts)

{
    "family": "Roboto",
    "category": "sans-serif",
    "variants": ["100", "300", "400", "500", "700", "900"],
    "files": {
        "400": "https://fonts.gstatic.com/...",
        "700": "https://fonts.gstatic.com/..."
    }
}

JavaScript SDK

The FontPreview SDK provides a complete interface for integrating font preview functionality into your JavaScript applications.

Installation

npm install fontpreview-sdk
# or
yarn add fontpreview-sdk

Usage Examples

import { FontPreview, ComparisonLab, BrandAnalyzer } from 'fontpreview-sdk';

// Create a preview instance
const preview = new FontPreview({
    element: document.getElementById('preview'),
    text: 'Custom Text',
    fontSize: 72
});

// Load fonts
await preview.loadFonts(['Poppins', 'Montserrat']);

// Compare two fonts
const comparison = new ComparisonLab({
    leftFont: 'Times New Roman',
    rightFont: 'Georgia',
    text: 'Comparison Text'
});

// Analyze brand
const analyzer = new BrandAnalyzer();
const result = await analyzer.analyze('Luxury sustainable brand');
console.log(result.archetype); // 'The Ruler'

Web Components

Use FontPreview as custom HTML elements for easy integration with any framework.

Example

<!-- Font Preview Component -->
<font-preview 
    text="Hello World"
    font-size="48"
    fonts='["Inter", "Roboto"]'
></font-preview>

<!-- Brand Analyzer Component -->
<brand-analyzer
    on-analysis-complete="handleAnalysis"
></brand-analyzer>

Troubleshooting

Frequently Asked Questions

Changelog