Custom fonts

1. Have the custom font(s) you would like to add to a page on hand. They will typically be in a .otf or .ttf file format
2. Go to https://transfonter.org/. Make sure only the WOFF and WOFF2 checkboxes are selected on the right side. Add your font(s) and then convert them.
3. Upload the WOFF and WOFF2 to your site's files within Makeswift.
4. Copy the path for each font file and keep the URLs handy.
5. Copy and paste this code into a page snippet:
   
   

   <style>
       @font-face {
           font-family: 'Font name';
           src: url('font-name.woff2') format('woff2'),
           url('font-name.woff') format('woff');
           font-weight: normal;
           font-style: normal;
       }
   
       h1,h2,p {
           font-family: 'Font name', sans-serif !important;
       }
   </style>
   	

6. "Font family" can be any name you'd like to use. Make sure whatever is set in the first "font-family" exactly matches the same name set in the last "font-family" property.
7. Copy and paste the file path URLs into the appropriate slots within the **@font-face CSS.
8. The second block of CSS tells your page which headline and text tags to use the custom font. You can use h1, h2, h3, p, a, button, and li. If you'd like to apply your custom font to your entire page, you can target everything using the following:
   
   

   <style>
       @font-face {
           font-family: 'Font name';
           src: url('font-name.woff2') format('woff2'),
           url('font-name.woff') format('woff');
           font-weight: normal;
           font-style: normal;
       }
   
       * {
           font-family: 'Font name', sans-serif !important;
       }
   </style>
   	

Now your page is using your custom fonts to match your brand.