Font Squirrel: A Little Help

What is Font Squirrel?

Font Squirrel began as a resource for free, commercial-use fonts and has evolved into an indispensable tool for web developers. The platform offers two primary services: a vast library of free fonts available for download, and the Webfont Generator--an online utility that converts desktop font files into web-optimized formats.

The Webfont Generator solves a critical problem in web typography. When you purchase or download a font for desktop use, it typically comes in TrueType (TTF) or OpenType (OTF) format. These formats, while perfect for print and local applications, aren't ideal for the web. The generator transforms these files into multiple web-compatible formats, generates the necessary CSS, and packages everything into a convenient download--free of charge.

The Problem with Desktop Fonts on the Web

Desktop font formats were designed for local installation and don't account for the unique challenges of web delivery. TrueType and OpenType files contain the complete character set of a font, including glyphs you may never use. This bloats page load times and consumes bandwidth unnecessarily.

Custom typography is one of the most powerful tools in a web designer's arsenal. It transforms generic websites into distinctive brand experiences, communicates personality, and guides users through visual hierarchy. For developers looking to incorporate custom fonts into their projects, understanding web font conversion is an essential skill that bridges the gap between design and implementation.

Web Font Formats Explained

Web Open Font Format (WOFF)

WOFF was created specifically for web use, developed with input from Mozilla and standardized by the W3C. It acts as a compressed container for TrueType and OpenType fonts, reducing file size by over 40%. This compression significantly improves page load times. WOFF also supports metadata embedding, allowing font designers to include licensing information. Supported by all major modern browsers including Chrome, Firefox, Safari, and Edge.

Web Open Font Format 2 (WOFF2)

WOFF2 is the successor to WOFF, offering even more efficient compression through Brotli encoding. This next-generation format provides approximately 30% better compression than WOFF, resulting in faster loads and reduced bandwidth consumption. WOFF2 supports the full range of TrueType and OpenType features, including variable fonts. For new web projects, WOFF2 should be your primary format.

Legacy Formats

EOT (Embedded OpenType) was Microsoft's proprietary solution for older Internet Explorer versions. Now largely obsolete, modern websites should not need to include EOT files.

SVG Fonts use vector graphics for perfect scalability but have limited browser support. They're suitable for icons but not recommended for body text.

Format Comparison at a Glance

When choosing formats for your web project, prioritize WOFF2 for its superior compression and broad support, with WOFF as a reliable fallback. This approach covers approximately 98% of deployed browsers while maintaining optimal performance. Our web development services can help you implement the optimal font strategy for your project.

Why Font Format Matters for Performance

The choice of web font format directly impacts your website's loading speed and user experience. Larger font files take longer to download, especially on mobile networks, which can negatively affect your SEO performance. WOFF2's superior compression means faster page loads, better Core Web Vitals scores, and improved user engagement.

Using the Font Squirrel Webfont Generator

Step 1: Access the Generator

Navigate to the Font Squirrel Webfont Generator. The interface presents a simple upload mechanism--either drag and drop your font files or click to browse your computer. You can upload TTF, OTF, or TTC (TrueType Collection) files. The generator accepts multiple files at once, which is useful when you need to process multiple weights or styles of the same font family.

Step 2: Review and Accept the License Agreement

Before processing, you'll need to acknowledge the font license. Font Squirrel cannot verify the licensing status of fonts uploaded. By proceeding, you confirm that you have the right to use and convert the font for web embedding. Many fonts require separate licensing for web embedding.

Step 3: Choose Your Conversion Mode

Basic Mode handles most common use cases automatically.

Expert Mode offers:

• Format selection: Choose which output formats to generate--WOFF2, WOFF, EOT, SVG, TTF
• Subsetting: Reduce file size by including only needed characters
• Hinting: Improve rendering at small sizes
• WOFF2 compression level options: Balance between file size and quality

Step 4: Download Your Webfont Kit

The download includes:

• Font files in your selected formats
• A stylesheet.css with @font-face declarations
• A demo HTML file showing the fonts in action
• License information if available

Extract these files to your project directory, typically in a dedicated fonts folder within your CSS or assets directory.

Implementing @font-face in Your CSS

Basic Syntax

The @font-face at-rule declares a custom font and specifies where the browser can find it. At minimum, you need to define a font-family name and a source URL. The font-display property helps control how text appears during loading, with swap being the most common choice for balancing user experience and aesthetics.

@font-face {
 font-family: 'MyCustomFont';
 src: url('fonts/mycustomfont.woff2') format('woff2'),
 url('fonts/mycustomfont.woff') format('woff');
 font-display: swap;
}

Bulletproof Cross-Browser Syntax

Different browsers have historically required different formats. The bulletproof syntax ensures compatibility as outlined in Google's web fonts guide:

@font-face {
 font-family: 'MyCustomFont';
 src: url('fonts/mycustomfont.eot') format('embedded-opentype'), /* IE 5-8 */
 url('fonts/mycustomfont.woff2') format('woff2'), /* Modern browsers */
 url('fonts/mycustomfont.woff') format('woff'), /* Most browsers */
 url('fonts/mycustomfont.ttf') format('truetype'), /* Safari, Android */
 url('fonts/mycustomfont.svg#font') format('svg'); /* Legacy iOS */
}

Modern projects can often simplify this to WOFF2 and WOFF formats, since these two formats now cover approximately 98% of browsers in use.

Managing Font Weights

Each weight requires its own @font-face declaration with appropriate font-weight and font-style properties:

@font-face {
 font-family: 'MyCustomFont';
 src: url('fonts/mycustomfont-regular.woff2') format('woff2');
 font-weight: 400;
 font-style: normal;
}

@font-face {
 font-family: 'MyCustomFont';
 src: url('fonts/mycustomfont-bold.woff2') format('woff2');
 font-weight: 700;
 font-style: normal;
}

This approach allows you to use semantic font-weight values like bold or lighter in your CSS while ensuring the correct font variation loads automatically.

Best Practices for Web Font Optimization

Optimize File Size Through Subsetting

One of the most effective ways to reduce web font file size is subsetting--included only the characters you actually use. If your website is in English and doesn't include special characters, there's no reason to include the full character set. The Font Squirrel generator allows custom subsetting where you can specify exact characters or Unicode ranges. This can reduce file size by 50% or more.

Consider your actual content needs when subsetting. If you run a blog that never uses accented characters or special symbols, a Latin-only subset may suffice. For multilingual sites or applications requiring specific character sets, adjust your subsetting accordingly.

Implement Font Loading Strategies

The Flash of Unstyled Text (FOUT) is a common issue where custom fonts load after page content has already rendered. The WebFont Loader JavaScript library provides event hooks for controlling loading:

/* Hide text while custom font loads */
.wf-loading h1, .wf-loading p {
 visibility: hidden;
}

/* Show text when font is active or if loading fails */
.wf-active h1, .wf-active p,
.wf-inactive h1, .wf-inactive p {
 visibility: visible;
}

For a simpler approach, the CSS Font Loading API provides programmatic control over font loading without additional JavaScript libraries.

Preload Critical Fonts

<link rel="preload" href="/fonts/mycustomfont.woff2" as="font" type="font/woff2" crossorigin>

This tells the browser to prioritize downloading the font file before it encounters the font in CSS. Use preload sparingly--reserve it for fonts that are critical to initial page rendering. Preloading too many resources can actually slow down page loading.

Cache Considerations

Font files are static assets that rarely change once deployed. Ensure your server configuration includes long-term caching headers for font files. This prevents browsers from re-downloading fonts on subsequent page visits, significantly improving perceived performance for returning visitors.

Optimized font loading contributes to better page speed scores, which is essential for SEO performance and user experience.

Common Pitfalls and How to Avoid Them

Cross-Origin Resource Sharing (CORS)

When loading fonts from a different domain or CDN, ensure proper CORS headers are configured. Without appropriate headers, browsers may block font loading due to security policies. If your fonts are served from a CDN or separate domain, verify that the server includes the appropriate Access-Control-Allow-Origin headers.

File Path Errors

A surprisingly common issue is incorrect file paths in @font-face declarations. Double-check that your font file paths are correct relative to your CSS file.

/* Wrong: */
src: url('/fonts/mycustomfont.woff2');

/* Correct if CSS is in /css/ and fonts in /fonts/: */
src: url('../fonts/mycustomfont.woff2');

Cache Considerations

Font files are static assets that rarely change. Ensure your server configuration includes long-term caching headers for font files to prevent browsers from re-downloading them on subsequent visits.

Beyond the Generator: Advanced Typography

Variable Fonts

Variable fonts allow a single font file to behave like multiple fonts. Through axis definitions, a single file can produce any weight from thin to ultra-bold. A complete type family that might require 10+ individual font files can often be replaced with a single variable font file.

Font Display Strategies

The font-display descriptor in @font-face provides built-in control:

@font-face {
 font-family: 'MyCustomFont';
 src: url('fonts/mycustomfont.woff2') format('woff2');
 font-display: swap; /* Shows fallback font, then swaps */
}

Values include: block (hides text briefly), swap (shows fallback then swaps), fallback (briefly hides), and optional (browser decides based on network conditions). Choose the value that best balances aesthetics and performance for your project.

Self-Hosting vs. Font Services

While Font Squirrel generates self-hostable fonts, services like Google Fonts offer alternative approaches. Self-hosting gives you full control and avoids third-party dependencies but requires manual updates. Font services handle hosting and optimization automatically but introduce external dependencies. Evaluate your project's needs when choosing between self-hosted and service-based fonts.

Sources

1. Font Squirrel - Webfont Generator
2. MDN Web Docs - Web Fonts
3. Web.dev - Quick Guide to Webfonts via @font-face
4. AxiomThemes - How to Create Webfont Kits Using Font Squirrel Generator
5. White Peak Digital - Font File Types Explained