Click meWelcome to the Web Font Blender

Click meA little tool to checkout neat webfont combinations. Obviously we all want to make the web look better, don't we?

Click me

The usage is pretty simple: Just select the text element you want to style by clicking on it. In the left bar you can change the font family, the size and the line height. For your convenience all measurements are shown in PX, EM and percent, so you can easily copy and paste it in your stylesheets. Of course, you can adjust the body font size (the base size from which all measurements derive) as well as changing the visibility of certain elements in the "Settings" section.

If you've found a web font combination suiting your needs you can grab the code on the "Grab codes" page, where you not only find the adequate code to link the web fonts but also the css for the body, h1, h2 and p elements. Happy blending!

Font files

There is no need to load a specific font at the moment

CSS

body{ font-family: Arial, sans-serif; font-size: 100%; line-height: 1.6; } h1{ font-size: 2.5em; } h2{ font-size: 1.5em; } p{ font-size: 1em; }

About the Blender

Although there are pages like The Web Font Combinator and PXtoEM I felt the need of a tool combining certain functions I personally need nearly every day. So I came up with the Web Font Blender. Hopefully you find this tool as helpful as I do.

Designed and developed by Andreas Weis. Checkout the code on Github. If you find a bug please feel free to email me post@andreasweis.com

Beware

This site was tested with the latest versions of Chrome, Safari and Firefox. I just hate IE...

Credits

Chip Cullen for his inspiring Web Font Combinator

Brian Cray for PXtoEM - one of the most useful tools for font unit conversions

Joschi Kuphal for showing me the right path how to solve the font cache problem.