Using Custom Fonts in CSS to Enhance Website Design

While the list of "web safe" fonts is very limiting, designers are finding effective ways of applying custom fonts to a site while avoiding negative impacts on site performance or user experience.

Keep reading to learn more about using custom fonts in CSS to enhance your web design.

But First… the Importance of Custom Web Fonts

Many web designers today face a major issue when generating creative solutions for their clients. This issue pertains to web typography – selecting the right font combinations for their digital compositions.

Get it right and the typography will work in glorious harmony with your website to effectively brand your company and draw attention to the most important elements of your page. Get it wrong and you’ll be left with a generic looking, possibly unprofessional site that won’t live up to it’s fullest potential.

Fortunately, the majority of design solutions we are seeing today are utilizing strong typography to strengthen the overall look and feel of a website. It’s something that the print world has been doing since the mid 15th century! It’s certainly the time for the web to catch up.

The @font-face Rule

The @font-face CSS rule is by far the simplest and web-friendly way to integrate custom fonts into a website design. Designers typically like to apply custom font treatments on main navigation, headers, buttons and other special calls-to-action in order to enhance their design and draw the visitors’ attention to these page regions. The @font-face rule is fully supported by all modern browsers (Chrome, FireFox, Sarafi, IE9/10) and is even supported in legacy browsers like Internet Explorer 7 and 8.

Applying custom fonts using @font-face does not impact site crawling or page load speed.

Integration is very simple:

  1. Convert required font into the proper font formats for web (TrueType, WOFF, EOT or SVG)
  2. Add your font-family declarations to the top of your style sheet
  3. Use the newly established “font-family” in your style sheet

Below is a basic example of this custom font integration:

Add the font-face section to CSS

@font-face {
  font-family: 'HelveticaCondensedBlack';
  src: url('../fonts/helvetica-condensed-black-webfont.eot');
  src: url('../fonts/helvetica-condensed-black-webfont.eot?#iefix')
  webfont.svg#HelveticaCondensedBlack') format('svg');
  font-weight: normal;
  font-style: normal;

Apply to elements in CSS

.hpMain h2, .hpMain h2 a {
  font-family:'HelveticaCondensedBlack',Arial, Helvetica, sans-serif;

Free @font-face Tools

Depending on the fonts selected by the designer, there are many free tools for generating the required font files to support this custom font on the web.

Google Webfonts provides several free typefaces to designers. All required font files are stored with Google and are ready for integration into a designer’s CSS.

Font Squirrel is another free tool that allows a designer to upload their selected fonts and convert them to the required WOFF, TrueType, and SVG files. Font Squirrel also generates the @font-face code required at the top of the style sheet. It is important to check the licensing for these custom fonts to ensure they are permitted for use on a website.

Other @font-face Options

Other typefaces (such as Franklin Gothic, Gill Sans, etc.) require more licensing for web use. There are many options that are not free but offer a wider variety of font and font-weight options and licensing/access to many popular font foundries. Below are a few options available to designers:

There are other ways of applying custom font treatments to a website. At Unleashed, we have experimented with several of these options and have found @font-face replacement to be the most effective way to integrate these custom fonts. This method allows our team to keep sites running fast while also adding the visual impact of strong typography.

Contact us today to learn more about our design process, using custom fonts in CSS, and how we can help you strengthen your web image.