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
r2e2
June 12, 2023, 4:54pm
2
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.
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>
2 Likes
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…
3 Likes
Does anyone know what fonts works with rich text in glide apps?
Is there any list?