Website Design Guides

Webfonts - Creating and Using Them

Webfonts - Creating and Using Them

Getting the font right on your website can be a bit of a juggling process. First there’s finding a font that works with the style of the website you are building, then there’s the question of will it work in all browsers. Google Fonts are great, but if you need a font that compliments the style of graphic based fonts such as a logo on your site, it can be difficult to find a Google font that matches well.

This is where webfonts can be useful. @font-face has been around some time now, but it’s only since CSS3 that it has become useful as a technique for embedding fonts in a web page allowing use of a typeface even if it isn’t sitting on the user’s computer. We don’t have to rely on “web safe” fonts such as Arial or Verdana any longer.

So let’s take a look at how we create a web font and use the @font-face command to embed it in our website.

  • First we need to choose a font. For this tutorial we’re going to use the Bradley Hand font which can be downloaded free from myfontfree.com

  • Once you have downloaded the font the next step is to unzip the files and upload the ttf file to a great website called Fontie I’ve found that creates web fonts for you.
  • Hit the Start button and Fontie creates all the font files needed to successfully embed your new font in your website.
  • Next we need to upload the web font files to our website. This is best done by FTP. If you not familiar with using FTP to upload files to your webserver I’ll be covering this in a later article.
  • Create a new directory on your webserver called fonts. Unzip the fontie.zip file and copy the .woff file to the fonts folder on your webserver.
  • Now that we have the webfont on our web server the next step is to tell the website to use it using the @font-face command.
  • Create a new stylesheet (remember you will need to call this stylesheet in the section of your website.
  • Add the following code to the new stylesheet:
  • @font-face { font-family: bradley; src: url(BradleyHandITC_gdi.woff); }

    p { font-family: bradley; }

Refresh you page and you’re done.

To give you the best possible experience, this site uses cookies. Continuing to use pigeontech.co.uk means you agree to our use of cookies. If you'd like to learn more about the cookies we use please find out more