# Change font family of a text

**URL:** <https://community.glideapps.com/t/change-font-family-of-a-text/62684>\
**Category:** Ask for Help\
**Created:** [June 12, 2023, 1:56pm UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684 "2023-06-12T13:56:19Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Charlie\_Galle](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/charlie_galle/32/54375_2.png) [@Charlie\_Galle](https://community.glideapps.com/u/Charlie_Galle)\
**Post date:** [June 12, 2023, 1:56pm UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/1 "2023-06-12T13:56:19Z")

</div>

Hi all,

I am currently trying to have custom fonts on Glide. My idea was to use rich text components with the “font-family” attribute to give my text the desired font. However, it is not working as Glide does not apply the font I want (Caveat). I wanted to know how to give text a specific font (via rich text or any other means) ?

Thank you in advance!

---

<div class="post-metadata">

**Author:** ![r2e2](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/r2e2/32/56625_2.png) [@r2e2](https://community.glideapps.com/u/r2e2)\
**Post date:** [June 12, 2023, 4:54pm UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/2 "2023-06-12T16:54:34Z")

</div>

My first thought is through the css editor which I think is only available on Pro. Haven’t seen any font related settings.

---

<div class="post-metadata">

**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\
**Post date:** [June 12, 2023, 5:33pm UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/3 "2023-06-12T17:33:30Z")

</div>

You should be able to do that by using HTML inside of a rich text component… something like `font-family: 'Courier New'`

If you want to use CSS you’ll need Business or Enterprise

---

<div class="post-metadata">

**Author:** ![Charlie\_Galle](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/charlie_galle/32/54375_2.png) [@Charlie\_Galle](https://community.glideapps.com/u/Charlie_Galle)\
**Post date:** [June 13, 2023, 7:05am UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/4 "2023-06-13T07:05:39Z")

</div>

That what I tried, here my custom code inside my rich text component :

`<p style="font-family: 'Caveat', cursive; color: black; margin-left: 10px; font-size: 25px">`

The color, margin and font size work, but not the font family. I tried without the “cursive”, or with others font similar to Caveat, but that didn’t changed anything.

If I dont mention a font-family, Glide use is basic “Arial” style font, if I mention one Glide use another font but its always the same no matter the font-family I apply.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [June 13, 2023, 7:22am UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/5 "2023-06-13T07:22:46Z")

</div>

The below might help:

> <https://stackoverflow.com/questions/8749225/loading-an-external-font-via-inline-css>

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 13, 2023, 11:26pm UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/6 "2023-06-13T23:26:35Z")

</div>

Has anyone been able to do this? I tried importing the fonts through a style tag but seems like Glide eliminates everything from external style tags.

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [June 13, 2023, 11:35pm UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/7 "2023-06-13T23:35:31Z")

</div>

I was able to use font-family: Playfield Display in a Rich Text component

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 13, 2023, 11:36pm UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/8 "2023-06-13T23:36:20Z")

</div>

Can you share a template of the rich text you were using? Thank you!

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [June 13, 2023, 11:50pm UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/9 "2023-06-13T23:50:37Z")

</div>

Sure, not on my computer but I believe it was something like:

```auto
<center><p style=“font-family: ‘Playfair Display’; font-size: 48px;”

Hello World

</p></center>

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 13, 2023, 11:53pm UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/10 "2023-06-13T23:53:57Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/b/6b9ee218ada9204686464db0fd417dd8074aff4a.png)

Here’s the result of:

```auto
<center><p style="font-family: 'Playfair Display'; font-size: 48px;"</p>Test</center>

<center><p style="font-family: 'Raleway'; font-size: 48px;"</p>Test</center>

```

It seems like it wasn’t able to load any of the external fonts, and reverted to a default font.

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [June 14, 2023, 12:46am UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/11 "2023-06-14T00:46:06Z")

</div>

> [@ThinhDinh](#):
>
> `<center><p style="font-family: 'Playfair Display'; font-size: 48px;"</p>Test</center>`

Try these:

```auto
<h1 style="font-family: 'Playfair Display', serif;">Hello World</h1>

<h1 style="font-family: 'Quicksand', sans-serif;">Hello World</h1>

<h1 style="font-family: 'Courier', sans-serif;">Hello World</h1>

<h1>Hello World</h1>

```

![Screenshot 2023-06-13 at 8.45.45 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/5/05f201f274a75c215c00dae0b662900c717f7018.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 14, 2023, 1:09am UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/12 "2023-06-14T01:09:00Z")

</div>

Now that does work. I realized where I got it wrong. I was closing the p tag before the text!

However, it seems like it still doesn’t load the fonts that it doesn’t have pre-installed.

```auto
<h1 style="font-family: 'Caveat', sans-serif;">Hello World</h1>

<h1 style="font-family: 'Raleway', sans-serif;">Hello World</h1>

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/5/55f9b8ed545425a0b5f337303c9aba3ae4897878.png)

First 4 came from your examples, the last 2 are Caveat and Raleway. It goes to the fall back sans-serif, it seems.

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [June 14, 2023, 1:27am UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/13 "2023-06-14T01:27:52Z")

</div>

Yea, looks like it only supports certain fonts. What fonts those are… 🤣

---

<div class="post-metadata">

**Author:** ![creaters](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/creaters/32/39116_2.png) [@creaters](https://community.glideapps.com/u/creaters)\
**Post date:** [April 14, 2024, 1:37pm UTC](https://community.glideapps.com/t/change-font-family-of-a-text/62684/14 "2024-04-14T13:37:05Z")

</div>

Does anyone know what fonts works with rich text in glide apps? 😁  
Is there any list? 🤔