Tools

Web Font Tools

Dealing with web fonts can be tricky and sometimes you just need the right tools to help you achieve this. The tools below are a list of font loaders, font resizers and performance tools.


The State of Web Type

Up-to-date data on support for type and typographic features on the web.

Type Rendering Mix

A tool to help you apply CSS based on the text rasterizer and antialiasing your browser is using

Font size container

A simple plugin to keep font-size in proportion with it's containers size

Web Font Loader

The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Fonts API provides. The Web Font Loader also lets you use multiple web font providers.

Performance &
Custom Fonts

Preventing the Performance Hit from Custom Fonts

Web Font
Optimization

Webfont optimization is a critical piece of the overall performance strategy. This article by Google dives into optimizing loading and rendering of your webfonts.

Font Face and
Performance

Steve Souders explores the impact that web fonts can have on web page performance.

The State of
Web Type

A useful tool that provides you with up-to-date data on support for type and typographic features on the web.

Normalize
Opentype.css

Adds OpenType features—ligatures, kerning, and more—to Normalize.css.

Type­set.js

A typographic pre-processor for your html which uses zero client-side JavaScript.

Brick.im

Brick.im serves high quality fonts converted to several formats for wider browser compatibility.

Typebase.css

Typebase.css is a minimal, customizable typography stylesheet. It has both less and sass versions so it can easily be modified and merged into modern web projects.

Google Web
Fonts Helper

A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets.