• Share 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. Websites that make use of embedded web font faces typically gain a smart and professional appearance. We make use of embedded web fonts in a number of ThemeFlood theme designs and commonly use the Google web fonts service (these hosted fonts have proven to offer the most flexible commercial licensing and work most reliably in RapidWeaver).

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 from Google.

How do embedded fonts work?

Embedded web fonts (in their function) are not too dissimilar to images you include in your webpages already. Typically a hidden link (call) is made to the font file, from the top of the page. So when a visitor lands of your website, a copy of the font file is automatically downloaded to the temporary cache on their computer. We then use CSS to apply our embedded font face to elements of the page. Although the method sounds quite convoluted, modern web browsers can typically download and render embedded font faces in milliseconds; often long before the content itself is loaded on the page. It is also feasible to mix-and-match different embedded font faces on the same page.

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.

The system we predominantly use to handle embedded web fonts is the recommended, standardised approach all expert web developers typically follow. That is to mean, we call the embedded font file at the top of the theme index.html file, and then tell the web browser what text or headings in the page need to receive the special font face using CSS markup.

As mentioned already, the free Google Web Fonts service has proven to be the easiest and most reliable method to get embedded web fonts working in RapidWeaver. Other methods (like bundling font files with the theme) typically incur very high bandwidth (which can slow-down the loading of your webpage) or simply fail to work as advertised.

Obviously, using an online service like Google Web Fonts means that your embedded web fonts will only render on websites which have an active internet connection. For websites you're building with the intention of burning them to a CD or flash drive for offline viewing, you will either need to accept embedded font faces will not show or download and install the relevant font faces onto the computer or device used for viewing the website. Again an advantage of using the free Google Web Fonts service is that they let you download the font files, to install onto a computer for offline use.

Finding an alternative embedded web font face to use

Simply go to the Google Web Fonts website. No payment or signup is required. You can use options in the sidebar to search for specific font faces or apply filters (like sorting fonts by serif or sans-serif type). When you've found a font face you want to use, click on the 'Quick Use' button, next to the corresponding font face.

Google fonts website

You will then be presented to two simple code snippets; some HTML and some CSS. This is what you take and use in the theme, to reference the preferred embedded font file. So take a note of these or keep the webpage open in your web browser.

Choosing a web font

Some embedded web fonts are only available in one style. Others are available in different styles and weights. You may find that customising a font to include lots of styles or weights causes the calculated size of the font file to grow. It's wise to always try to keep the font size as small as possible, unless your intention is to build special webpages that need to make use of many font styles. The smaller the font file, the quicker your website will load.

Customising embedded font faces in themes with font face settings

If your chosen ThemeFlood RapidWeaver theme provides font face theme style settings (e.g. content font face, heading font face, sidebar font face) then there are two minor edits required, if you wish to swap the theme-supplied font face with another.

1) Make sure you're working from a duplicated and renamed copy of the original theme you purchased. This ensures that any subsequent updates will not damage or overwrite your theme modifications.

2) Open the theme contents. In your preferred code editor, open the theme index.html file. Towards the top of this file, look for the call being made to the Google web fonts service (pictured and highlighted below). Replace the link with the link shown on the Google Web Fonts website, for the preferred font face you wish to use. Save the changes and close this file when done.

Font call

3) Open the css folder, in the theme contents. Then navigate into one of the subdirectories (like body-font). Find the CSS file named embedded.css and open this in your preferred code editor. Replace the name of the font shown with the name of the new font you wish to use. Save the changes and close the file.

CSS file

Returning back to RapidWeaver preview, you should find your new font face has taken effect. Perform a full republish of the website (if it's previously been published) to get your latest theme modifications online.

Customising embedded font faces in themes without font face settings

If your chosen ThemeFlood RapidWeaver theme does not have font face theme style settings then there are two minor edits required, if you wish to swap the theme-supplied font face with another. Themes without font face settings are not faulty; mostly they are intended to support embedded font faces from the outset. This is applicable to theme designs we provide like Black, Boutique and White.

1) Make sure you're working from a duplicated and renamed copy of the original theme you purchased (see the theme management article). This ensures that any subsequent updates will not damage or overwrite your theme modifications.

2) Open the theme contents. In your preferred code editor, open the theme index.html file. Towards the top of this file, look for the call being made to the Google web fonts service (pictured and highlighted below). Replace the link with the link shown on the Google Web Fonts website, for the preferred font face you wish to use. Save the changes and close this file when done.

Font call

3) Open the styles.css file, in the theme contents. Search for the old font names (the product pages on the ThemeFlood website typically stipulate the name of the font face hard-coded into the theme, if it's not immediately visible to you or commented). Replace the name of the font shown with the name of the new font you wish to use. Save the changes and close the file.

Font stack

Returning back to RapidWeaver preview, you should find your new font face has taken effect. Perform a full republish of the website (if it has previously been published) to get your latest theme modifications online.

Using embedded web fonts from other providers We don't officially support embedment of fonts from other providers, other than Google web fonts. However our theme customers have successfully worked with other font services in the past, including Font Squirrel, Fonts.com and Typekit. Often the setup instructions from the theme perspective is almost identical to those outlined above (if using web-hosted font files) and most of these other font services provide free technical support and detailed documentation of their own.

Embedding font faces using FontStack

FontStack is a free stack element by Stacks4Stacks which lets you call and embed Google Web Fonts, without needing to edit the theme. It works with all ThemeFlood themes and most elements in these themes. The webpage for FontStack provides a download link and full setup details. FontStack requires the Stacks plugin by YourHead Software, and this is supported, distributed and sold separately to themes and stack elements).

Need help?

Don't forget that all purchased ThemeFlood themes include free duplication and renaming of the theme; followed by any modifications required, like changes to embedded font faces. All this is normally performed at no extra charge. Free themes and themes sold by other companies can be customised for a fee. Please get in contact for details and availability of theme customisation services.

Provide Feedback

Please use this form to provide feedback about this particular knowledgebase article. For example; to report broken links, errors or things you think could be worded better. We welcome all constructive feedback. All fields are required.

 

Feedback is submitted anonymously (unless you otherwise provide your name or contact details). We don't promise to reply to every feedback message received; neither is this a good place to request technical support. You can continue to request one-to-one support through the ThemeFlood website. See getting in contact for details.