--- title: How to add custom fonts to the theme? description: How to customize the fonts family? image: https://documentation.awwaldesign.com/hubfs/Google%20Drive%20Integration/How%20to%20Change%20the%20Font%20Family%20in%20your%20Templates.jpeg --- [![logo](https://documentation.awwaldesign.com/hs-fs/hubfs/logo.png?width=72&height=44&name=logo.png "logo")](https://awwaldesign.com/) - Listing pages - [Single Column](https://templates.awwaldesign.com/ad-blog-single-column) - [Two Column](https://templates.awwaldesign.com/ad-blog-two-column) - [Three Column](https://templates.awwaldesign.com/ad-blog-three-column) - [Horizontal Style](https://templates.awwaldesign.com/ad-blog-horizontal-style) - [With Sidebar](https://templates.awwaldesign.com/ad-blog-with-sidebar) - [Listing with Simple Hero Option](https://templates.awwaldesign.com/ad-blog-listing-option-two) - [Listing with Popular Post Swiper](https://templates.awwaldesign.com/ad-blog-listing-option-three) - Post pages - [Post page](https://templates.awwaldesign.com/ad-blog-single-column/unlocking-potential-the-power-of-coaching-in-empowering-your-employees) - [Post page with sidebar](https://templates.awwaldesign.com/ad-blog-with-sidebar/office-vs.-home-the-pros-and-cons-of-working-in-different-environments) - [Blog Post Style 2](https://templates.awwaldesign.com/ad-blog-three-column/office-vs.-home-the-pros-and-cons-of-working-in-different-environments) - [Blog Post Style 2 with Sidebar](https://templates.awwaldesign.com/ad-blog-horizontal-style/designing-the-future-innovative-architecture-for-a-changing-world) - System Pages - [404 page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=olbEMd5l60dX91Y-P7v5Ow&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FBlog%20theme%20by%20awwal%20design%2Ftemplates%2Fsystem%2F404.html&updated=1680759056647) - [500 page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=qpLpaucv8iqgYJwdXcqLjw&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FBlog%20theme%20by%20awwal%20design%2Ftemplates%2Fsystem%2F500.html&updated=1680759069742) - [Search result page](https://templates.awwaldesign.com/search-result-page?term=awwal&type=BLOG_POST) - [Email backup unsubscribe page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=pIHFrQquYtNBHUWLKeqb5A&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FAwwal%20Blog%20Theme%2Ftemplates%2Fsystem%2FAwwal%20-%20Email%20backup%20unsubscribe%20page.html&updated=1681624857047) - [Email subscriptions preference page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=aiSIXOdQbXkWoELSt0VeBQ&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FAwwal%20Blog%20Theme%2Ftemplates%2Fsystem%2FAwwal%20-%20Email%20Subscription%20preferences%20page.html&updated=1681624863601) - [Email subscriptions confirmation page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=968fXOPCZcHe1qDBduJkFA&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FAwwal%20Blog%20Theme%2Ftemplates%2Fsystem%2FAwwal%20-%20Subscription%20Confirmation%20Page.html&updated=1681621623610) - [Password prompt page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=ZIYiQQ87G9MtXBLzMsbB2A&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FAwwal%20Blog%20Theme%2Ftemplates%2Fsystem%2FAwwal%20-%20Password%20Prompt%20Page.html&updated=1681624851432) - Landing Pages - [Multi purpose LP](https://templates.awwaldesign.com/ad-multipurpose-landing-page) - [eBook Landing Page](https://templates.awwaldesign.com/ebook-landing-page) - [Minimal eBook Landing Page](https://templates.awwaldesign.com/minimal-ebook-landing-page) - [Thank you page](https://templates.awwaldesign.com/thank-you-page) - [Subscription Page](https://awwaldesign.com/subscribe-to-awwal-blog) - [Documentation](https://documentation.awwaldesign.com/awwal-blog-theme) [Buy Now](https://app.hubspot.com/ecosystem/3067823/marketplace/website/awwal-blog-theme-by-awwal-design) ## What are you looking for? [Back](https://documentation.awwaldesign.com/awwal-blog-theme) # How to add custom fonts to the theme? Created By Safwan Shaikh Last Modified on: 1 Oct, 2024 Note: This article is for adding custom font family, If you're using Google fonts, checkout this article ▶[How to change the font family?](https://documentation.awwaldesign.com/awwal-blog-theme/how-to-change-the-font-family)   If you’re planning to add custom fonts to your theme but don’t want to deal with code-level changes, this guide is for you. You can now upload fonts directly to your Brand settings in HubSpot and select them straight from the theme editor. #### Step 1: Gather all your fonts Before you begin, make sure you have all the font files you want to use ready and organized. This includes the correct formats (such as .woff or .woff2) and all required font weights and styles. Having everything prepared upfront will make the setup smooth once you start selecting fonts in HubSpot. You can use an online converter like [Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator) to convert font files to the formats needed. #### Step 2: In your HubSpot portal, Go to Content > Brands ![](https://documentation.awwaldesign.com/hs-fs/hubfs/image-png-Dec-17-2025-11-07-57-1285-AM.png?width=621&height=747&name=image-png-Dec-17-2025-11-07-57-1285-AM.png) #### Step 3: Under Fonts choose Add ![](https://documentation.awwaldesign.com/hs-fs/hubfs/image-png-Dec-17-2025-11-41-54-4684-AM.png?width=792&height=1903&name=image-png-Dec-17-2025-11-41-54-4684-AM.png) #### Step 4: Under Custom Fonts section, click Add a custom font ![](https://documentation.awwaldesign.com/hs-fs/hubfs/image-png-Dec-17-2025-11-42-59-5906-AM.png?width=796&height=1923&name=image-png-Dec-17-2025-11-42-59-5906-AM.png)   #### Step 5: Upload your font files and give a proper name. ![](https://documentation.awwaldesign.com/hs-fs/hubfs/image-png-Dec-17-2025-11-43-56-0213-AM.png?width=766&height=1850&name=image-png-Dec-17-2025-11-43-56-0213-AM.png)   #### Step 6: Select proper weight style for you font. (Thin, Regular, Bold, Extra Bold) ![](https://documentation.awwaldesign.com/hs-fs/hubfs/image-png-Dec-17-2025-11-45-00-9116-AM.png?width=739&height=1786&name=image-png-Dec-17-2025-11-45-00-9116-AM.png)   Your custom fonts should like below. You don't have to select fonts just just upload theme here. We'll select the fonts under the theme options. #### ![](https://documentation.awwaldesign.com/hs-fs/hubfs/image-png-Dec-17-2025-11-54-17-1453-AM.png?width=753&height=1307&name=image-png-Dec-17-2025-11-54-17-1453-AM.png) --- #### Step 7: Open your theme options You can open theme options by going to any of your blog post or a page then Edit and select Theme: Awwal Blog ![](https://documentation.awwaldesign.com/hs-fs/hubfs/image-png-Dec-17-2025-11-48-33-4221-AM.png?width=746&height=605&name=image-png-Dec-17-2025-11-48-33-4221-AM.png) #### Step 8: Under typography tab, under the font dropdown, search the name of the font you just uploaded. Select your custom font in all your Headings H1 to H6 and Body text ![](https://documentation.awwaldesign.com/hs-fs/hubfs/image-png-Dec-17-2025-11-46-55-5547-AM.png?width=796&height=1924&name=image-png-Dec-17-2025-11-46-55-5547-AM.png) #### Step 9: Publish theme and you're good to go! You have successfully added custom fonts to your theme.     ### Didn’t find what you were looking for? Feel free to reach out and we’ll get back to you! [![awwal-logo-white](https://documentation.awwaldesign.com/hubfs/awwal-logo-white.svg "awwal-logo-white")](https://awwaldesign.com/) Write a brief description of your company or services here. keep it short but make it interesting enough to make user want more. Important Links - Home - Services - About Us - Blog - Contact Us - Get Started [123 456 7890](tel:123%20456%207890) [123 456 7890](tel:123%20456%207890) [123 456 7890](tel:123%20456%207890) Copyright @ 2023. All Right Reserved. Made with love by [Awwal Design](https://awwaldesign.com/) - - - ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Safwan Shaikh", "url" : "https://documentation.awwaldesign.com/awwal-blog-theme/author/safwan-shaikh" }, "dateModified" : "2025-12-17T12:11:34.000Z", "datePublished" : "2025-12-17T11:59:30.000Z", "headline" : "How to add custom fonts to the theme?", "image" : [ "https://documentation.awwaldesign.com/hubfs/Google%20Drive%20Integration/How%20to%20Change%20the%20Font%20Family%20in%20your%20Templates.jpeg" ], "mainEntityOfPage" : { "@id" : "https://documentation.awwaldesign.com/awwal-blog-theme/how-to-add-your-own-the-fonts-family", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://documentation.awwaldesign.com/hubfs/awwal-logo-2.svg" }, "name" : "Awwal Design" } } ```