Typography

You can customize the typography of your online store using this section. It allows you to pick from a variety of free fonts using Google Fonts.

You can also pick the font weight for each element. Please note that some fonts may NOT have the desired weight available. If you want to know if a font weight is available, please visit Google Fonts. Otherwise it will be substituted by the closest available weight.

If you’re looking for font inspirations, you can take a look at https://fontpair.co/ or https://www.reliablepsd.com/ultimate-google-font-pairings/ for some inspirations.

Custom fonts

If you prefer using your own custom fonts, it is also possible to import them using a few lines of custom code. This method should work for most fonts, but some fonts providers may use alternative methods. Please note that fonts used on websites are not the same as fonts for desktop. When shopping for font licenses, please make sure to purchase a Webfont license, not just a desktop license.

For example, here is how you would install the GT America font from www.grillitype.com.

1. Upload your Webfont kit on your website.
   To do so, go Tools > Files > Upload and upload each file provided to you. Typical Webfont files should be .eot, .ttf, .woff and .woff2 and you should have one set of files per font-weight (ex: Bold, medium or light) and font-style (ex: Regular or Italic).
   
2. Add custom CSS to your site
   Go to Design > Advanced > Custom CSS and add the correct CSS to import your Webfonts. Your font provider should provide you the correct CSS, but you should update your font path according to the files you’ve uploaded in step 1.
   
   For example, if I want to use GT America Regular, Italic and Bold on your website, you would use the following code (with your own URLs):
   

@font-face {
  font-family: 'GT America';
  src: url('../../fonts/GT-America-Standard-Regular.eot'); /* IE9 Compat Modes */
  src: url('../../fonts/GT-America-Standard-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/GT-America-Standard-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/GT-America-Standard-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('../../fonts/GT-America-Standard-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'GT America';
  font-style: italic;
  src: url('../../fonts/GT-America-Standard-Regular-Italic.eot'); /* IE9 Compat Modes */
  src: url('../../fonts/GT-America-Standard-Regular-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/GT-America-Standard-Regular-Italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/GT-America-Standard-Regular-Italic.woff') format('woff'), /* Pretty Modern Browsers */
       url('../../fonts/GT-America-Standard-Regular-Italic.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'GT America';
  font-weight: bold;
  src: url('../../fonts/GT-America-Standard-Bold.eot'); /* IE9 Compat Modes */
  src: url('../../fonts/GT-America-Standard-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/GT-America-Standard-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/GT-America-Standard-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('../../fonts/GT-America-Standard-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
}

:root {
  --font-heading: 'GT America', Helvetica, Arial, Sans-serif;
  --font-primary: 'GT America', Helvetica, Arial, Sans-serif;
}