• Share a link to this article:

Embedded web font faces

Embedded web fonts have become a popular trend in modern web design. A key advantage of embedded fonts is that they allow you to break-away from the limiting and often very inconsistent choice of web-safe font faces. Embedded web font support has improved greatly in recent years, with compatibility guaranteed with just about every web browser released in the last ten years.

Breeze RapidWeaver theme

A screenshot is shown above from a test site of the Breeze theme, and this provides an excellent example of what embedded font faces look like. Breeze already includes style settings to call and embed the 'Source Sans Pro' font face.

The role of RWFontKit

RWFontKit (RapidWeaver Font Kit) is a conveniently packaged library of web-safe and embedded font faces included in many of our premium themes. This grants you instant access to a choice of well-over 100 quality font faces. You do not need to buy extra plugins to add these fonts to your website; everything is already included and configured within the theme ready for you to use. None of the font faces have any dependencies on outside services or font foundries (like Google Web Fonts). Plus all the listed fonts support Latin extended character sets.

Web-safe font faces are common font faces (like Arial, Courier, Times New Roman) that all web browsers and devices support. W3Schools have an excellent article here about web-safe font faces and some examples of them.

Embedded font faces are speciality font faces that use the @font-face CSS method to convert lettering into a more fanciful typeface. Again W3Schools have written an informative article about CSS @font-face you can access here.

Fonts are a very important part of modern web design. They help you set the tone of the content you are writing. Many expert designers recommend you only use a maximum of two different font faces in your design. Commonly you would set a font face for headings and another for body content. RWFontKit follows this trend, in permitting you to set the font face on major groups; like headings, navigation and body content.

We have been careful to hand-pick only the most useful and highest-quality font faces to use in RWFontKit. A careful observation has been placed on their file sizes, to ensure the fonts do not adversely effect page loading speeds.

Some of the ThemeFlood themes that include RWFontKit include...

If you want to see a sampler of the font faces, you can download this pack of JPG images. This will help demonstrate to you what the different fonts look like.

You will find the full list of fonts listed in the theme style settings. Using the drop-down menu, you can make your font selection from the list. No further code or configuration is required.

You will note that fonts are sorted alphabetically into 3 main categories, these being:

  1. Websafe and semi-websafe font faces
  2. Embedded font faces
  3. Other specialist / miscellaneous font faces

As you would expect, all your normal colouring and other font style properties will take effect on your content.

Web browsers not supporting embedded fonts

To safe-guard against instances where an end user may have a web browser that lacks support for embedded web font faces or is having difficulty getting them to render, a list of web-safe font faces (commonly referred to as a 'stack') is also specified to act as a safety net. That way, there's no chance somebody landing on your website will be missing content! Text will always get rendered.

Using a stack element

It is possible to use an addon stack (for the YourHead Software Stacks plugin) to embed other font faces. Two free font embed stacks worth looking at are Font Stack and Fontamental. If using your own fonts with these stacks, be sure to abide by any licensing requirements.