Web Font Chooser & CSS Code Generator

Choosing the right font or typeface is an important step in creating a web page, and one of the key factors is the relationship between the heading and paragraph. You may choose to have big bold headings with extra spacing between the characters, or you might prefer using capital letters and adding a splash of colour. There are numerous posibilities and the Web Font Chooser provides a quick and easy way to try them out, while generating the CSS code for you.

To use the Web Font Chooser, start with the Heading and select a Font family from the drop down list below. Three checkboxes are then provided for Bold, Italic of Capital letters and a combination of these can be selected. To add Colour to the text, click on the black square and move your mouse around over the colour chooser, clicking again to select the desired hue. Finally, three sliders control the font size, line height and letter spacing - to use these, click and hold on the orange button and drag left or right. Repeat this process for the Paragraph text.

As you make your selections the 'Dynamic Sample' text below will automatically change and the 'CSS Code' updated. Once you have finished, select the 'CSS Code' and copy/paste into your web page's style sheet. [1]

  Font family [2] Bold Italic Caps Colour Size Line Height Letter Spacing

Dynamic Sample

Random Latin Text

Pri te quem labitur, facer molestiae suscipiantur at nam. Ut porro ullum viris eos. Lobortis mnesarchum duo cu, et usu adhuc viris indoctum, ad prima mutat perpetua nam. Sed an soleat eruditi. Est ea illud ludus moderatius, in fastidii disputando his. Vim consetetur referrentur no, usu libris verear dolorum at, ut aperiam dolorum moderatius eam. Eam et mundi praesent. Ne diam invidunt menandri his, epicuri tractatos ad per.

CSS Code

[1] Should you find the text on your web page looks different when using the CSS code generated above, check that it is not inheriting other CSS properties from your stylesheet. For example, if you have the font-size for the 'body' element set to 80% then the percentage font size of the 'h1' heading will be relative to that and therefore appear smaller than it does here. This page has been created so that the font size is relative to the browser default.

[2] One of the dilemmas when creating a web page is that your visitor will only see the font or typeface you specify if they have that font or typeface on their computer. You could just use Arial, like many websites, and you'd be pretty much guaranteed that everyone will have it. However, there are other fonts out there which are common enough to justify their use and will give you that bit of extra stylistic freedom. These are loosely considered as 'web safe fonts' and are often present on both Windows & Mac systems. Alternative fonts should always be specified and are provided in the CSS code generated.

Some useful links to web pages on the concept of 'web safe fonts' are:
15 Best Web Safe Fonts (Robert Mening)
Common Fonts to all Versions of Windows & Mac Equivalents (Alberto Martinez Perez)
Web Safe Fonts Tutorial (George Jaros)
CSS Web Safe Font Combinations (w3schools)

[3] Slider code from Carpe, colour picker from Meta100, otherwise Web Font Chooser is © 2006-2020 S.I.Warhurst