Adding a custom Web Font to your theme

From Spiffy Stores Knowledge Base

Revision as of 12:02, 26 September 2012 by Admin (talk | contribs) (Created page with 'Web Fonts allow you to add your own custom font to a theme, with the fonts being downloaded to your customers' browsers when they visit your store. This means that you are no lon…')
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Web Fonts allow you to add your own custom font to a theme, with the fonts being downloaded to your customers' browsers when they visit your store. This means that you are no longer limited to the set of common fonts that are distributed with the operating system and browser.

Installing the Web Font

You will need to source your web font, either by purchasing it from a font vendor, or by downloading one from a repository of free fonts.

In order to achieve support for your font across a wide range of browsers, you will need to provide your font in four different formats.

The formats required are:

  • .eot - Embedded OpenType
  • .ttf - True Type Font
  • .woff - Web Open Font Format
  • .svg - Scalable Vector Graphics

If you have only a .ttf font file, then you may be able to use the Font Squirrel Font Face Generator service to generate the other file formats for you. You can find the generator at the Font Squirrel web site.

Once you have your four font files, upload them to your theme. Go to your "Design & Assets -> Theme editor" page, scroll down to the "Upload a new Theme file", and upload your four web font files.

Retrieved from "http://www.spiffystores.com.au/kb/index.php?title=Adding_a_custom_Web_Font_to_your_theme&oldid=3109"