---
title: How to add a custom font
description: Looking to add a custom font to your website that is not a Google Font?
---

[Skip to content](https://learn.blockcms.build/how-to-add-a-custom-font#main-content)

English

Show submenu for translations

![](https://learn.blockcms.build/hs-fs/hubfs/BlockCMS%20Logo.png?width=67&height=50&name=BlockCMS%20Logo.png)

Open main navigation

Close main navigation

- English
  
  Show submenu for translations

 How can we help you?

- There are no suggestions because the search field is empty.

1. [BlockCMS Documentation](https://learn.blockcms.build/?hsLang=en)
2. [Custom Coding](https://learn.blockcms.build/custom-coding?hsLang=en)

# How to add a custom font

## Looking to add a custom font to your website that is not a Google Font?

To add a custom font to your website follow these steps:

1. Obtain the URL for your font file. Typically this is a .otf or .ttf file, like: https://example.com/your-font-location/assets/Roboto-SemiBold.otf
2. Navigate to Custom Coding \> CSS
3. Add the following CSS (replace the URL with your custom font URL):
   
   ```
   @font-face {    src: url(https://example.com/your-font-location/assets/Roboto-SemiBold.otf);    font-family: title-font-custom;}:root {    --title-font: title-font-custom;}
   ```
4. Save and publish

- [Homepage Setup](https://learn.blockcms.build/homepage-setup?hsLang=en)
- [Launch Your Website](https://learn.blockcms.build/launch-your-website?hsLang=en)
- [Custom Pages](https://learn.blockcms.build/custom-pages?hsLang=en)
- [AI Content Writing](https://learn.blockcms.build/ai-content-writing?hsLang=en)
- [Custom Coding](https://learn.blockcms.build/custom-coding?hsLang=en)
- [Footer](https://learn.blockcms.build/footer?hsLang=en)
- [Images & Media](https://learn.blockcms.build/images-media?hsLang=en)
- [Website Theme](https://learn.blockcms.build/website-theme?hsLang=en)
- [Campspot Booking Integration](https://learn.blockcms.build/campspot-booking-integration?hsLang=en)
- [Ecommerce Tracking & Analytics](https://learn.blockcms.build/ecommerce-tracking-analytics?hsLang=en)
- [General How-To](https://learn.blockcms.build/general-how-to?hsLang=en)
- [White Pine Console Migration](https://learn.blockcms.build/white-pine-console-migration?hsLang=en)
- [Blog](https://learn.blockcms.build/blog?hsLang=en)

[![Chill listening crop-3](https://learn.blockcms.build/hs-fs/hubfs/BlockCMS%20Logo.png?width=55&height=55&name=BlockCMS%20Logo.png "Chill listening crop-3")](https://learn.blockcms.build/?hsLang=en)

[mailto:email@email.com](mailto:email@email.com)