> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/settings/font-sets.md).

# Font Sets

{% hint style="warning" %}
Font Sets have been deprecated in favour of the [Font Manager](/cwicly/font-manager.md). If you choose to continue managing your fonts through Font Sets, toggle the **Deprecated Font Sets** option in [settings](/settings/settings.md).
{% endhint %}

Font Sets can be browsed, added, removed or edited from the Settings Tab.

Most of the time, with over 900+ fonts available, you will find yourself using the included Google Fonts. But there will come a time where you want to upload your own custom fonts that you have found on the internet or have created yourself.

{% hint style="info" %}
Cwicly only accepts fonts in the .woff2 format.
{% endhint %}

## Enable Font Sets (Cwicly Settings)

Activate this option if you want to continue managing your old font sets.

* In the Advanced settings, find Deprecated Font Sets in Deprecated.
* Toggle on/off as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FHyx9GZXWspfYfry4ZoEf%2FScreenshot%202023-08-23%20at%2011.00.56.png?alt=media&amp;token=8b834cbb-0c10-495c-a310-01e327821876" alt=""><figcaption></figcaption></figure>

## Add

* Go to the Settings tab.
* Open the Font Sets panel.
* Enter the desired Font Name in the Font Set Name field.
* Click Add.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FW0ftWb9xYDGtImeRYNSc%2FScreenshot%202023-08-25%20at%2011.19.49.png?alt=media&amp;token=266a505d-7c0e-4503-894f-b1cea51a1792" alt=""><figcaption></figcaption></figure>

## Edit

This allows you to add a font variation to your Font Set such as weight, style and display).

* In "Available Font Sets", find the custom Font Name you wish to edit.
* Click Edit.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FDgrsUyk3XDWg6jdf1Z5z%2FScreenshot%202023-08-25%20at%2011.21.36.png?alt=media&amp;token=76512909-74d9-41c7-8189-ecf091a45bda" alt=""><figcaption></figcaption></figure>

### Add Custom Font Variation

***Weight*** The weight property defines what the weight is for the current variation of the font

***Style*** The style property Defines whether the Style for the current variation of the font is *Normal*, *Oblique* or *Italic*

***Display*** The display property Lets you specify how web fonts are loaded in the web browser and applied to your website.

* Click Add Font Variation.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F5voc7sffHPilYK30HlXs%2FScreenshot%202023-08-25%20at%2011.22.51.png?alt=media&amp;token=c1614ebd-e56e-4d4b-a5c2-fdbafdac2712" alt=""><figcaption></figcaption></figure>

* Select the corresponding Weight option in the dropdown as required (Bold, 100, 200, 300 etc).

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FVJgLQmHwfVI8kZ9JIEoQ%2FScreenshot%202023-08-25%20at%2011.26.47.png?alt=media&amp;token=138c750e-8620-45ed-b332-40f1c8686dcd" alt=""><figcaption></figcaption></figure>

* Select the corresponding Style option in the dropdown as required (Normal, Italic, Oblique).

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FwtFdEOEvBwqa7G7EclxA%2FScreenshot%202023-08-25%20at%2011.27.37.png?alt=media&amp;token=fbc98d24-a88c-43c5-9186-6927347510fb" alt=""><figcaption></figcaption></figure>

* Select the corresponding Display option in the dropdown as required (Auto, Block, Swap, Fallback, Optional).

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FVyk5x65eKE9VZQXSQYm1%2FScreenshot%202023-08-25%20at%2011.28.33.png?alt=media&amp;token=427858dc-90e1-4780-ad7b-630ee85571d7" alt=""><figcaption></figcaption></figure>

* Click Upload for the corresponding WOFF2 File.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fu8YKCE3G2OtnYRRmy6h6%2FScreenshot%202023-08-25%20at%2011.29.20.png?alt=media&amp;token=5b67dedd-10b5-4d52-9107-d7bdb7947348" alt=""><figcaption></figcaption></figure>

Open the Font Set file that you wish to add.

* Select the required WOFF2 file.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FS8IavZjhlqCPO6DhUSBa%2FScreenshot%202023-08-25%20at%2011.35.59.png?alt=media&amp;token=1e4fdf93-8702-4fa2-9a62-282f8bf28066" alt=""><figcaption></figcaption></figure>

* Click Add Font Variation to add the font variation you have uploaded.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FbhH86mMYW0VftIvvdwhq%2FScreenshot%202023-08-25%20at%2011.40.36.png?alt=media&amp;token=065e2909-2e91-411d-a1b9-33e7936b1e77" alt=""><figcaption></figcaption></figure>

You can add additional font variations as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FNUm7m8TZaZ1oGh3xrMEd%2FScreenshot%202023-08-25%20at%2011.43.43.png?alt=media&amp;token=e6138839-563e-4c9b-8694-7d429dcfadaa" alt=""><figcaption></figcaption></figure>

## Remove

* Open the Fonts Sets panel.
* Find the Font Sets you wish to remove.
* Click Delete.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FZ9nO84fZDjcAVppeSjPf%2FScreenshot%202023-08-25%20at%2011.45.35.png?alt=media&amp;token=f09984b0-88c6-436a-a892-a8473b7e7185" alt=""><figcaption></figcaption></figure>
