AMP by Shop Sheriff offers dozens of built-in fonts that you can use on your AMP pages out of the box.  For custom fonts that aren't natively supported, we allow you to use Custom CSS to import a font and use it on your Shopify AMP pages.

Check if your font is supported

Adding a custom font is only necessary if you don't see your font available in the AMP Theme Editor.  

Open your Theme Editor and click on Theme Settings > Typography.  If you do see your font there, we recommend using that built-in approach.  If not, you can continue with this tutorial.

Adding a custom font

You can add your own custom font using the Custom CSS tool.   You will be writing CSS into the Custom CSS tool which will use @font-face to load the fonts.

A quick example

Here is some example CSS that imports the "Questrial" font on AMP:

@font-face{
    font-family:Questrial;
    font-weight:400;
    font-style:normal;
    font-display:fallback;
    src: url(https://fonts.gstatic.com/s/questrial/v17/QdVUSTchPBm7nuUeVf70sSFlq20.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

@font-face{  
  font-family:Questrial;
  font-weight:400;
  font-style:normal;
  font-display:fallback;
    src: url(https://fonts.gstatic.com/s/questrial/v17/QdVUSTchPBm7nuUeVf70viFl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body,input,textarea,button,select,h1,h2,h3,h4,.h1,.h2,.h3,.h4,.h5,.btn {    
    font-family: 'Questrial';
}

You can copy/paste this code directly into your AMP Custom CSS tool and you will be able to see the results.

Importing your own font

You must have the font on your original theme in order to do this. You will have to locate the @font-face declaration for your custom font, and then add some CSS to the AMP Custom CSS tool. Since every theme is different, there is no standard way of finding your @font-face declaration, but here are the steps for most non-heavily-customized themes.

1. Open your theme's theme.scss.css file in your browser, and search for the @font-face declaration for your custom font.
   If you do not have a theme.scss.css file, or if you can't find your font there, try checking your other CSS files on your Shopify theme.
2. In the AMP Custom CSS tool, paste that @font-face declaration into the.  Example:

   @font-face{font-family:some-font-family-here; src:url(some-src-here) ... }

   You will copy the @font-face declaration from the opening bracket @font-face{ to the closing bracket }.  
   Make note of the name of the font-family value, as you will use it in the next step.
3. In the AMP Custom CSS tool, write CSS to make elements on your page use this font family. Here's an example that will set everything to this new font:

   body,input,textarea,button,select,h1,h2,h3,h4,.h1,.h2,.h3,.h4,.h5,.btn {
     font-family: 'some-font-family-here';
   }

Both code snippets from steps 2 and 3 are necessary. Your preview will update in real-time, so if you have done everything correctly, you will be able to see the new font on your pages in the AMP Theme Editor.