--- title: Changing your website's fonts description: Change the fonts on your B12 website. Choose one from the built-in list in Visual edit, or upload your own brand font file and use it sitewide. --- [Skip to content](https://support.b12.io/en/v3/using-custom-fonts#main-content) ![b12 logo](https://support.b12.io/hubfs/b12%20logo.svg) - [Help Center](https://support.b12.io/) - [B12 Website](https://www.b12.io/) - [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery) - [Resources](https://www.b12.io/resource-center/) - [Pricing](https://www.b12.io/pricing/) - [Log in](https://b12.io/dashboard/) Open main navigation Close main navigation - [Help Center](https://support.b12.io/) - [B12 Website](https://www.b12.io/) - [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery) - [Resources](https://www.b12.io/resource-center/) - [Pricing](https://www.b12.io/pricing/) - [Log in](https://b12.io/dashboard/) - [Start for free](https://b12.io/signup/) [Start for free](https://b12.io/signup/) How can we help? - There are no suggestions because the search field is empty. 1. [B12 Help Center](https://support.b12.io/en?hsLang=en) 2. [Built-in features](https://support.b12.io/en/built-in-features?hsLang=en) # Changing your website's fonts ## Pick a font from the built-in list, or upload your own brand font and apply it across your whole website. | ![ronnel](https://support.b12.io/hs-fs/hubfs/Ronnel%20DG.png?width=60&height=60&name=Ronnel%20DG.png) Written by: Ronnel DG Last updated: 01 Oct., 2026 | | --- | You can swap your site's fonts for others from B12's built-in list, or upload a font file of your own so your site matches the rest of your branding. Both are done in `Visual edit`, without writing any code. ### How your website's font styles work Your site has three named font styles, and the design reuses them everywhere. Changing one style updates every piece of text that uses it, across every page. You can change all three yourself in Visual edit. Changing the font of one single heading, or of headings only, is a different job. Check this article about [styling your text](https://553918.hubspotpreview-na1.com/content-rendering/v1/public/_hcms/preview/content/194004863522?portalId=553918&_preview=true&cacheBust=1790797885146&preview_key=ioFVaftZ&isPreview=true&preview_theme=true&hsPreviewerApp=page&tc_deviceCategory=desktop&hubdb_row_id=219746882199&theme_variant=194004295734#styling-text). | Font style | What it usually covers | | --- | --- | | Sans serif | Letters with plain, clean ends. Most sites use this for body text, buttons, and menus. | | Serif | Letters with small strokes on the ends. Often used for headings, or for a more traditional, magazine-like feel. | | Mono | Every character takes up the same width, so text lines up in neat columns. Used for things like code samples and reference tables. | Each style starts out set to `Default`, which is whatever B12 chose when it built your site. Your site may not use all three styles. It depends on the design style chosen when your site was built. A style can be set in Fonts and still not appear anywhere on your pages. If you change a style and nothing in the preview changes, your site probably doesn't use it. **Note:** Changes you make in Visual edit don't consume [AI credits](https://support.b12.io/en/v3/ai-message-credits?hsLang=en). Asking the AI Agent to change your fonts does. ### Choosing a font from the list The built-in list holds a large set of free web fonts, each one shown in its own typeface so you can see what it looks like before you pick it. Everything in this section is point-and-click, so it's the fastest way to try a few options. #### Changing a font style 1. Click `Visual edit` in the chat input. The Design panel opens in the left pane with three sections: `Colors`, `Fonts`, and `Effects`. 2. Click `Fonts`. You'll see your three font styles, each showing the font it currently uses. ![](https://support.b12.io/hs-fs/hubfs/image-png-Sep-25-2026-08-14-44-9735-PM.png?width=348&height=255&name=image-png-Sep-25-2026-08-14-44-9735-PM.png) 3. Click the style you want to change: `Sans serif`, `Serif`, or `Mono`. 4. Pick a font from the list. Your website preview updates after a few seconds. 5. Try a few if you like. You can keep picking fonts and watching the preview until one fits. Once you're happy with the font, click `Save` in the bar at the bottom of the left panel. ![](https://support.b12.io/hs-fs/hubfs/image-png-Sep-25-2026-08-15-19-3341-PM.png?width=352&height=472&name=image-png-Sep-25-2026-08-15-19-3341-PM.png) **Caution:** Seeing your new font in the preview doesn't mean it's saved. If you move on without clicking Save in that bar, the change is lost. Saving also isn't publishing: your visitors won't see the new font until you publish your site. **Tip:** If you see a single element's settings instead of the three sections, you have something selected in the preview. Click Design in the breadcrumb at the top of the panel to go back to the sitewide options. ### Uploading your own font If your business already has a brand font, you can upload the font file and use it in place of any of the three styles. The upload option sits at the top of the same font picker. #### Preparing your font file Before you start, have the font file saved somewhere you can find it on your computer. A few things to check: - **The file type.** B12 accepts .ttf, .otf, .woff, and .woff2 files, one at a time. Fonts made for websites usually come as .woff2 or .woff. - **Your license.** A font you bought or downloaded needs a license that allows use on a website, which is sometimes sold separately from the desktop version. Checking this is up to you. - **The style you need.** One file is usually one weight and one style, so a regular file won't give you a bold or italic version of that font. #### Uploading a custom font 1. In Visual edit, open `Fonts` and click the style you want your font to replace. 2. Click `Upload custom font` at the top of the list. ![](https://support.b12.io/hs-fs/hubfs/image-png-Sep-25-2026-08-16-35-6436-PM.png?width=350&height=306&name=image-png-Sep-25-2026-08-16-35-6436-PM.png) 3. Choose your font file. Your website preview updates with the new font. 4. Click `Save` in the bar at the bottom of the left panel, then publish when you're ready. #### Replacing or removing a custom font To go back to a built-in font, open the same style again and pick one from the list. To swap one brand font for another, upload the new file the same way you uploaded the first. **Note:** An uploaded font isn't added to the font list. If you switch to a different font, you'll need to upload the file again to get it back, so keep your font file somewhere easy to find. ### If your font doesn't look right Most font surprises come down to one of these three things. **The wrong text changed.** You changed a style your site uses somewhere else. If your headings didn't change, they're probably using a different style than the one you edited. Change the other style, or set the font for those headings on their own using the prompt below. **Nothing changed on your live website.** Saving keeps the change in the editor only. Click `Publish` to push it to your live site. **The font looks thinner or plainer than expected.** A font file usually holds one weight, so bold and italic text may fall back to a version your browser creates itself. Uploading the bold file as a second style is one way around it, and the AI Agent can also set up a font family with more than one weight. For anything the three styles can't reach, such as using one font for headings only, ask the AI Agent: ``` Use [font name] for all headings across my website, and keep the body text in its current font. ``` ### Frequently asked questions →Can I use a font I bought from a font foundry? ⇒Yes, as long as your license covers use on a website. Upload the web font file the same way as any other custom font. →Can one heading use a different font from the rest of my site? ⇒Yes. In Visual edit, click the heading, then use the `Font` options in its `Typography` settings to switch it between your Sans serif, Serif, and Mono styles. For a font outside those three, ask the AI Agent. →Why doesn't my new font show on my published website? ⇒A font change has to be saved in the editor and then published. If you've done both and it still looks the same, refresh the page in your browser. →Do font changes use AI credits? ⇒Changing fonts yourself in Visual edit doesn't. Asking the AI Agent to change them does, because that's an AI Agent request like any other. - [Getting started](https://support.b12.io/en/getting-started?hsLang=en#main-content) - [Introduction](https://support.b12.io/en/getting-started?hsLang=en#introduction) - [Detailed guides](https://support.b12.io/en/getting-started?hsLang=en#detailed-guides) - [Working with B12's AI Agent](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#main-content) - [Agent Skills](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#agent-skills) - [Built-in features](https://support.b12.io/en/built-in-features?hsLang=en#main-content) - [Visual edit](https://support.b12.io/en/built-in-features?hsLang=en#visual-edit) - [Code editor](https://support.b12.io/en/built-in-features?hsLang=en#code-editor) - [Data & users (Backends)](https://support.b12.io/en/built-in-features?hsLang=en#data-users-backends) - [Forms & submissions](https://support.b12.io/en/built-in-features?hsLang=en#forms-submissions) - [Commerce](https://support.b12.io/en/built-in-features?hsLang=en#commerce) - [Contact manager](https://support.b12.io/en/built-in-features?hsLang=en#contact-manager) - [eSignatures](https://support.b12.io/en/built-in-features?hsLang=en#esignatures) - [Email Marketing](https://support.b12.io/en/built-in-features?hsLang=en#email-marketing) - [Team](https://support.b12.io/en/built-in-features?hsLang=en#team) - [Analytics](https://support.b12.io/en/built-in-features?hsLang=en#analytics) - [Website settings](https://support.b12.io/en/built-in-features?hsLang=en#website-settings) - [Adding functionality](https://support.b12.io/en/adding-functionality?hsLang=en#main-content) - [Third-party integrations](https://support.b12.io/en/adding-functionality?hsLang=en#third-party-integrations) - [Publishing & growing](https://support.b12.io/en/publishing-growing?hsLang=en#main-content) - [Domains](https://support.b12.io/en/publishing-growing?hsLang=en#domains) - [Connecting your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#connecting-your-domain) - [Managing Your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#managing-your-domain) - [Email Forwarding & Sending](https://support.b12.io/en/publishing-growing?hsLang=en#email-forwarding-sending) - [Growth & Marketing](https://support.b12.io/en/publishing-growing?hsLang=en#growth-marketing) - [Troubleshooting](https://support.b12.io/en/troubleshooting?hsLang=en#main-content) - [FAQs](https://support.b12.io/en/troubleshooting?hsLang=en#faqs) - [Account & billing](https://support.b12.io/en/account-billing?hsLang=en#main-content) - [Account Login & Password](https://support.b12.io/en/account-billing?hsLang=en#account-login-password) - [Subscription & Payment Information](https://support.b12.io/en/account-billing?hsLang=en#subscription-payment-information) - [Your Account](https://support.b12.io/en/account-billing?hsLang=en#your-account) - [Managing Multiple Websites](https://support.b12.io/en/account-billing?hsLang=en#managing-multiple-websites) - [Multi-user](https://support.b12.io/en/account-billing?hsLang=en#multi-user) - [Getting support](https://support.b12.io/en/getting-support?hsLang=en#main-content) - [Professional & Advanced Plan Support (B12 2.0)](https://support.b12.io/en/getting-support?hsLang=en#professional-advanced-plan-support-b12-2-0) - [B12 2.0](https://support.b12.io/en/b12-2-0?hsLang=en#main-content) - [Website Structure and Content](https://support.b12.io/en/b12-2-0?hsLang=en#website-structure-and-content) - [Website Style & Design](https://support.b12.io/en/b12-2-0?hsLang=en#website-style-design) - [Sitewide Settings](https://support.b12.io/en/b12-2-0?hsLang=en#sitewide-settings) - [Using the B12 Editor](https://support.b12.io/en/b12-2-0?hsLang=en#using-the-b12-editor) - [Analytics & SEO](https://support.b12.io/en/b12-2-0?hsLang=en#analytics-seo) - [Integrations - General](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-general) - [Integrations - Communication](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-communication) - [Integrations - Language](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-language) - [Integrations - Ecommerce](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-ecommerce) - [Professional & Advanced Plan Features](https://support.b12.io/en/b12-2-0?hsLang=en#professional-advanced-plan-features) - [Troubleshooting & Resources](https://support.b12.io/en/b12-2-0?hsLang=en#troubleshooting-resources) - [Contact Forms](https://support.b12.io/en/b12-2-0?hsLang=en#contact-forms) - [Online Scheduling](https://support.b12.io/en/b12-2-0?hsLang=en#online-scheduling) - [Advanced Editing (Experts Only)](https://support.b12.io/en/b12-2-0?hsLang=en#advanced-editing-experts-only) [![B12\_logo\_2025](https://support.b12.io/hs-fs/hubfs/B12_logo_2025.png?width=53&height=24&name=B12_logo_2025.png "B12_logo_2025")](https://www.b12.io) © 2025 B12. All rights reserved. ×