Safe Website Fonts

Design Tips- Last updated Nov 2, 2016

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.


Arial, Helvetica, sans-serif
Arial Black, Gadget, sans-serif
Comic Sans MS, cursive
Courier New, monospace
Georgia, serif
"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
Impact, Charcoal, sans-serif
Lucida Console, Monaco, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua, Palatino, serif
Tahoma, Geneva, sans-serif
Times New Roman, Times, serif
Trebuchet MS, sans-serif
Verdana, Geneva, sans-serif
MS Sans Serif, Geneva, sans-serif
MS Serif, New York, serif

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.

Browser Internet Explorer Browser Google Chrome Browser Mozilla FireFox Browser Safari Browser Opera
@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).

Browser Internet Explorer Browser Google Chrome Browser Mozilla FireFox Browser Safari Browser Opera
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.