Installing Custom Fonts

  • Last updated on May 10, 2023 at 9:48 PM

This article will guide you through installing custom fonts on your website, whether you've purchased a specific font or want to use a free font from a service like Google Fonts.

Google Fonts

  1. Go to the "Customize My Site" link in the Website menu.
  2. Scroll down and click "Set Up Fonts."
  3. Scroll down to "Add Free Fonts From Google."
  4. Search for the font you want and select the checkbox next to it. It will automatically import into your account.

Installing a purchased or downloaded font:

Step 1 - Download your font

Before starting, ensure you have the TTF, OTF, or WOFF files for the font you want to use. Many fonts can be easily found through a quick Google search and are available for free. However, if you're looking for a specialty font, you may need to purchase it. Here's a list of popular websites that offer free font downloads:

  1. Font Squirrel: Offers a wide variety of free, handpicked, and high-quality fonts for personal and commercial use. They also provide a useful webfont generator tool.

  2. DaFont: A popular resource with a vast collection of free fonts, including decorative, script, and other styles. Many fonts are available for personal use, but always check the license for commercial use.

  3. 1001 Fonts: Offers a large selection of free fonts for personal and commercial projects, organized by categories and styles.

  4. FontSpace: Features thousands of free fonts shared by designers, with options for personal and commercial use. Check the license for each font before using it in your projects.

  5. Behance: A platform for showcasing creative work, including typography and fonts. Many designers offer free fonts for download, but make sure to review the license terms.

  6. Adobe Fonts: Offers a large library of fonts for use with an Adobe Creative Cloud subscription, but some fonts are available for free.

Always check the license and usage terms for each font before using it in your projects, as some fonts may have restrictions or require attribution.

Step 2 - Convert your TTF, OTF, or WOFF using Font Squirrel's Webfont Generator

To upload a TTF or OTF font to Font Squirrel's Webfont Generator and download the generated webfont, follow these steps:

  1. Go to Font Squirrel's Webfont Generator website at https://www.fontsquirrel.com/tools/webfont-generator.

  2. Click the "Upload Fonts" button. A file explorer window will open, allowing you to navigate to the location of your TTF or OTF font file on your computer.

  3. Locate and select the TTF or OTF font file you wish to convert. Click "Open" or "Choose" to upload the file to Font Squirrel's Webfont Generator.

  4. After uploading the font, choose the appropriate settings for your needs. By default, the "Optimal" preset is selected, which balances font file size and quality. We recommend using "Optimal."

  5. Read and agree to the font usage terms by selecting the checkbox next to "Yes, the fonts I'm uploading are legally eligible for web embedding."

  6. Click the "Download your Kit" button to generate your webfont. Font Squirrel will convert your uploaded TTF or OTF font file into a web-compatible format, which includes WOFF and WOFF2 files, among others.

    In this example, we have successfully uploaded the TTF file for the font Peignot and have selected the 'Yes, the fonts I'm uploading are legally eligible for web embedding.' button which allows us to download the kit.

     

  7. Once the webfont generation is complete, a ZIP file will be available for download. Click the provided download link or the download icon to save the ZIP file to your computer.

Step 3 - Installing your font to your AttractWell account

  1. Locate the downloaded ZIP file on your computer and extract its contents using a file extraction tool like WinZip, 7-Zip, or your operating system's built-in extraction tool. Inside the unzipped folder, you will find your converted webfont files, including WOFF and WOFF2 formats, as well as a stylesheet.css file with the necessary CSS code for using the font on your website.

  2. Upload the .woff and .woff2 files to the file manager by clicking Vidoes, Images, Files or by visiting this link - https://attractwell.com/app/file-manager.
  3. Copy the contents of the stylesheet.css to you clipboard.
  4. Open a new window in AttractWell and add the code under Customize My Site > Set Up Fonts > Custom Fonts. Be sure to add <style> at the beginning and </style> at the end.

  5. Go back to your file manager https://attractwell.com/app/file-manager and copy the URL's for each font. You can right click on the file and select copy link.
  6. Replace the url() field with the link to the .woff2 file and repeat for the .woff file.
    Replace the highlighted orange text inside the ''


    This is what your code should look like after replacing the URLs with the uploaded fonts.

     

     

  7. In the "Editor Custom Fonts" field, there will be three areas to add. The first one (red) will need to be copy/pasted from the font-family section of your CSS code. The second (orange) will need to be the fallback font that will display if your font fails to load. Its best to use the font style of whatever font you are trying to add. The third (green) will be the name of the font that is displayed in your editor once its installed.

    Note - The syntax must be as follows: 'Madina,cursive': 'Madina'
  8. Save your changes and test the new font by checking the Font Family icon inside the editor. Contact support if you need assistance.
  9. Open a new blog and check the editor. Your new font should be installed.

We understand that this can be quite a technical thing so if you prefer, please email support@attractwell.com and someone on the team would be more than happy to help you with installing your font.