Safe Website Fonts

Recent studies have shown that font selection makes a significant impact on your customer's e-commerce experience. Proper font choice not only enhances the readability of your store's text, but triggers positive emotions in your customers.

While many fonts function well for titles and headers, fewer fonts work well in paragraph form. Most online stores will select 2-3 font families to be displayed on their site. Within the font family selected, you will need to determine which font is best for paragraph readability.

Your computer includes many fonts by default, however not all computers come with the same default fonts. As a merchant, you want to be sure that all visitors can view your store's designated text style. Below is a list of standard fonts that all your visitors should have. Note that within those few fonts you will need to specify your preferred priority order in case a browser doesn't support your first choice. The table below shows many of the browser supported fonts, and displays similar family groups together that you can use as your first, second and third choices.

You can add these fonts to your ShopSite store under Preferences > Layout Settings > Fonts. Simply copy one of the font families listed above, and paste it into the text field for fonts. Be sure you select the radio button to use your new font style instead of the font style selected from the pull down menu.

Google Fonts

Google has produced a font display method that allows users to, in essence, link to "Google's Computer" and use Google's fonts, rather than the fonts included on the end-users personal computer. In order to use Google Fonts, you will first need to link to Google fonts. The easiest way is by adding their <link> code into your store's footer field (Preferences > Layout Setings). If you are using a custom template you can add the code in the HEAD section of your page, in your CSS file directly or in some JavaScript on the page. Once you have linked to Google's fonts, you can use them on your site through Preferences > Layout Settings > Fonts, as explained in the first font option.

Another great merchant tool is Google's font pairing feature. This tool automatically produces complimentary font pairings for any Google font of your choice. This feature is especially useful for those of us who are less aesthetically inclined.

Upload Your Own Fonts

The third way to display custom fonts on your website is by uploading font files to your domain, then linking to those font files in your CSS. This does require CSS3 support and you would need to be using custom templates in your store.

@font-face	9.0	4.0	3.5	3.2	10.0

There are many font websites out there that will allow you to buy font files that you can then use on your website. When you buy font files, make sure that you are getting these font files in a few different formats, because different browers support different font file types (see below).

TrueType Fonts (TTF) most commonly supported	9.0	4.0	3.5	3.1	10.0
OpenType Fonts (OTF) scalable	9.0	4.0	3.5	3.1	10.0
Web Open Font Format (WOFF) W3C recommended	9.0	5.0	3.6	5.1	11.1
Embedded OpenType (EOT) compact format of OTF	6.0

Using the font you want...here is what the CSS, at the beginning of your file, will look like. Replace "customFont" with the actual name of your font.

@font-face {
    font-family: customFont;
    src: url(customFontName.ttf);
    src: url(customFontName.otf);
    src: url(customFontName.woff);
}

You can then add font-family: customFont; to any elements in your CSS that you would like to have the custom font.