Change font family of a text

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!

1 Like

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

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

2 Likes

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.

The below might help:

2 Likes

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.

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

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

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

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

Hello World

</p></center>

Here’s the result of:

<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.

Try these:

<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

1 Like

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.

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

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

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

1 Like

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

2 Likes