# External Custom Fonts

### How to Use External Custom Fonts in AppSections Brand Style

The "External Custom Fonts" setting allows you to link to an external custom font for your Shopify store. This feature provides flexibility in choosing unique typography that aligns with your brand's aesthetic. Follow the steps below to integrate an external custom font using Google Fonts into your Shopify store.

### **Steps to Add an External Custom Font**

1. **Go to Google Fonts:**
   * Visit [Google Fonts](https://fonts.google.com/).
2. **Select a Font:**

   * Browse and click on the font that interests you.

   <figure><img src="https://142038968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F54tjDZgFJRrNiMwPygUA%2Fuploads%2FbBbkuaF4ogXptfIFgXDm%2Fimage.png?alt=media&#x26;token=d7e78ee2-f9ee-4827-b4b6-322272df4559" alt=""><figcaption></figcaption></figure>

   * Click on the **Get font** button.

   <figure><img src="https://142038968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F54tjDZgFJRrNiMwPygUA%2Fuploads%2Flj3JBe86ocwKoKrDf6Mr%2Fimage.png?alt=media&#x26;token=d85ece1d-1991-4477-8ebf-b8e5fe8b79a6" alt=""><figcaption></figcaption></figure>
3. **Download the Font:**

   * Click on **Download all** to download a ZIP file containing the font.

   <figure><img src="https://142038968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F54tjDZgFJRrNiMwPygUA%2Fuploads%2FAetj0n0dEnYfW8DZqdtM%2Fimage.png?alt=media&#x26;token=f1154ad5-bc9a-4797-b159-3d112105fa2f" alt=""><figcaption></figcaption></figure>

   * A file named something like `fontname.zip` will be downloaded to your computer.
4. **Extract the Font File:**

   * Open the ZIP file on your computer.

   <figure><img src="https://142038968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F54tjDZgFJRrNiMwPygUA%2Fuploads%2Fd15ZEvq3z3k4u6kx95Bk%2Fimage.png?alt=media&#x26;token=22bd9204-2b38-4000-ae03-7e84710fde6e" alt=""><figcaption></figcaption></figure>

   * Extract the `.ttf` file (TrueType Font file) from the ZIP archive.

   <figure><img src="https://142038968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F54tjDZgFJRrNiMwPygUA%2Fuploads%2FOEJjSYYJtSywmsekDWBy%2Fimage.png?alt=media&#x26;token=5a90e4ce-333b-4421-aba7-a6baac1ce41f" alt=""><figcaption></figcaption></figure>
5. **Upload the Font to Shopify:**

   * Go to [Shopify Admin](https://admin.shopify.com).
   * In the left-hand dropdown menu, click on **Content** and then select **Files**.

   <figure><img src="https://142038968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F54tjDZgFJRrNiMwPygUA%2Fuploads%2FisShZJqRmRJv2pf3Yosw%2Fimage.png?alt=media&#x26;token=c6de9d52-361a-4933-9cfc-f93ba00aa754" alt=""><figcaption></figcaption></figure>

   * Click on **Upload files**.

   <figure><img src="https://142038968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F54tjDZgFJRrNiMwPygUA%2Fuploads%2F7gdkWksJAdjzc7DeSMCZ%2Fimage.png?alt=media&#x26;token=5e4a37a5-bd6b-44fd-81bc-d405b9962688" alt=""><figcaption></figcaption></figure>

   * Select the extracted `.ttf` file and upload it.
6. **Get the Font Link:**

   * Once the file is uploaded, click on the **Link** button next to the uploaded file to get the URL link for the font file.

   <figure><img src="https://142038968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F54tjDZgFJRrNiMwPygUA%2Fuploads%2FOBg0UWVSZ4MxKyEXx67R%2Fimage.png?alt=media&#x26;token=3a8d5ec7-83cf-44b6-8952-1272519837f8" alt=""><figcaption></figcaption></figure>
7. **Add Font URL to Brand Styles:**

   * Return to your Shopify Theme Editor.
   * Navigate to **Brand Styles > Typography**.
   * Paste the URL link into the **Font Custom 1** or **Font Custom 2** field.

   <figure><img src="https://142038968-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F54tjDZgFJRrNiMwPygUA%2Fuploads%2FB9EaIZYivEeAZiwhDNOA%2Fimage.png?alt=media&#x26;token=4724bc80-7e26-42a4-a920-3f6565ad835b" alt=""><figcaption></figcaption></figure>
8. **Apply the Custom Font:**
   * Ensure that the text elements you want to use the custom font for have the **External Font** option selected in their settings.
   * Make sure the previous settings are correctly applied to utilize the external font.
9. **Preview and Confirm:**
   * Preview your store to confirm that the external custom font is applied correctly to the desired text elements.
   * Check both mobile and desktop views to ensure consistency and readability.

### Summary

By following these steps, you can integrate an external custom font into your Shopify store, allowing you to use unique typography that matches your brand identity. This process involves downloading the font, uploading it to Shopify, and applying it through the Brand Styles settings.

If you have any questions or need further assistance, please contact our customer support team.