Using Fontello to Only Load Icon Fonts That You Need

Fontello: Create Lightweight Custom Icon Fonts

Fontello is a free, user-friendly service for crafting custom icon fonts from vector images. It streamlines web development by consolidating icons from various open-source projects (like Font Awesome, Entypo, and Typicons) into a single, compact file. This significantly reduces page load times and improves overall website performance.

Icon fonts offer several advantages over standard images: they are crisp on high-resolution screens, easily styled with CSS (size, color, shadows), and simpler to manage than image sprites. However, for new projects, SVG images might be a superior alternative, offering multi-color capabilities and sharper visuals. If legacy browser support or workflow constraints necessitate icon fonts, optimizing their use is crucial.

The challenge with popular icon font libraries like Font Awesome (version 4.7, ~75kb) is that most projects only utilize a fraction of the available icons. Loading the entire library unnecessarily increases page weight. Fontello solves this by allowing you to select only the needed icons.

Creating a Custom Font

1. Icon Selection: Choose your required icons from the Fontello homepage.
2. Customization: The "Customize Names" tab lets you rename icons (e.g., change icon-facebook to icon-fb). The settings button allows for prefix modification (e.g., changing the default icon- prefix). You can also adjust individual icon codes.
3. Download: Once satisfied, download the generated font files.

Integrating the Font

1. Extract: Extract the downloaded zip file. You'll find "css," "fonts" folders, and a "config.json" file (containing font configuration).
2. Import (Optional): For existing projects, drag the "config.json" file onto the Fontello page or import it via Settings > Import.
3. File Placement: Copy all files (maintaining folder structure) into your project directory.
4. CSS Inclusion: Include the generated CSS file (e.g., social-media.css) in your project.
5. Usage: Use icons in your HTML markup with the format <i class="icon-classname"></i>, replacing icon-classname with the icon's name.

Using Custom Images

While Fontello offers a vast library, you can import custom SVG images. Ensure your SVGs are properly prepared: remove fills, colors, complex rules (like evenodd fills), and FAT line attributes; join contours into single outlines.

Performance Gains

Fontello drastically reduces file size. In one example, a Font Awesome 4.7 file (75kb) was reduced to a 4kb Fontello file (using eight icons). The savings vary depending on the number of icons used. This minimizes HTTP requests and improves loading speed. Additionally, Fontello allows for a consistent icon prefix across multiple fonts, simplifying management.

Advanced Configuration

• CORS Headers: If hosting font files on a separate domain, configure CORS headers in your .htaccess file:

<code class="language-htaccess"><filesmatch>
  Header set Access-Control-Allow-Origin "*"
</filesmatch></code>

• Font MIME Types: Set correct MIME types in your .htaccess:

<code class="language-htaccess">AddType application/x-font-ttf           ttc ttf
AddType application/x-font-otf           otf
AddType application/font-woff            woff
AddType application/font-woff2           woff2
AddType application/vnd.ms-fontobject    eot</code>

Conclusion

Fontello simplifies creating lightweight, customized icon fonts. Even seemingly small file size reductions accumulate to improve website performance significantly. Consider its use to optimize your icon font workflow.

The above is the detailed content of Using Fontello to Only Load Icon Fonts That You Need. For more information, please follow other related articles on the PHP Chinese website!