---
title: How to change the font
slug: test-archbee/how-to-change-the-font
description: Learn how to easily change the font on your published collection with our step-by-step instructions. Enhance the look and feel of your collection by referencing and adding the font link using Custom CSS in the Settings tab. Follow our example to effortles
docTags:
createdAt: 2022-02-11T08:06:27.000Z
---
When you publish a collection you can control the way it looks by adding [Custom CSS](#) in the [Custom Code](<././HOSTED SPACES/Custom Code.md>) section.
When you want to change the font that loads on the production website, you have 2 options:
## 1. Using Google Fonts
::::WorkflowBlock
:::WorkflowBlockItem
Click on the gear icon ⚙️ to open the **Space Settings**
:::
:::WorkflowBlockItem
Look for the **Appearance** tab on the Space Settings modal
:::
:::WorkflowBlockItem
Scroll down to **Custom Fonts **and toggle it on
:::
:::WorkflowBlockItem
Choose the desired font and the changes will be automatically saved
:::
::::
## 2. Use Custom CSS to reference the font
::::WorkflowBlock
:::WorkflowBlockItem
Click on the gear icon ⚙️ to open the **Space Settings**
:::
:::WorkflowBlockItem
Look for the **Custom Code** tab on the Space Settings modal
:::
:::WorkflowBlockItem
Add the font link in the **Include Headers** box
**Include Headers font example:**
```html
```
:::
:::WorkflowBlockItem
Add the CSS properties
```css
```
:::
::::