# Import Custom Fonts?

**URL:** <https://community.glideapps.com/t/import-custom-fonts/78407>\
**Category:** Ask for Help\
**Created:** [December 6, 2024, 4:41am UTC](https://community.glideapps.com/t/import-custom-fonts/78407 "2024-12-06T04:41:29Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eduardo.Miranda](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eduardo.miranda/32/21913_2.png) [@Eduardo.Miranda](https://community.glideapps.com/u/Eduardo.Miranda)\
**Post date:** [December 6, 2024, 4:41am UTC](https://community.glideapps.com/t/import-custom-fonts/78407/1 "2024-12-06T04:41:29Z")

</div>

Hello everyone!

I’m trying to import the font that my client requires.  
But I can’t import it correctly. Can someone tell me what’s going on?

The idea is to create some floating buttons (I’ve already managed to do this thanks to a post I saw in the community)

but I can’t get the font to fit.

```auto
@font-face {
  font-family: "MyFont";
  src:
    url("https://raw.githubusercontent.com/drAkeSteinn/Video-HP/main/FormaDJRDisplay-Regular.woff") format("woff");
}

.floating {
   position: -webkit-sticky;
   position: sticky;
   bottom: -22px;
   z-index: 9999;
   
}
.floating button {
   border: 2px solid white;
   font-family: "MyFont"
   
}
.floating svg {
   color: white;
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/b/1b1ce515f0b7fe8d65065a94c255c7f2416e0073.jpeg)

I currently have a Team plan that allows me to use CSS  
Sorry for my bad english 🥲

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 6, 2024, 6:49am UTC](https://community.glideapps.com/t/import-custom-fonts/78407/2 "2024-12-06T06:49:23Z")

</div>

Use the selector: **.floating .button-text** or copy the following code into your custom css box:

```auto
@font-face {
    font-family: 'FormaDJRDisplay';
    src: url('https://raw.githubusercontent.com/drAkeSteinn/Video-HP/main/FormaDJRDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Applies to the entire application */
#app-root {
font-family: "FormaDJRDisplay";
}

/* Apply for floating button */
.floating .button-text{
font-family: "FormaDJRDisplay";
}

```

---

<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:** [December 7, 2024, 12:03am UTC](https://community.glideapps.com/t/import-custom-fonts/78407/3 "2024-12-07T00:03:44Z")

</div>

@Lucas_Pires Maybe you can try this.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [December 7, 2024, 5:12pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/4 "2024-12-07T17:12:53Z")

</div>

So do I just upload the font in GitHub and import as this CSS?

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [December 7, 2024, 5:16pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/5 "2024-12-07T17:16:08Z")

</div>

I tried this code in one of my apps, but didn’t change the font

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 7, 2024, 7:24pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/6 "2024-12-07T19:24:49Z")

</div>

> [@Lucas\_Pires](#):
>
> So do I just upload the font in GitHub and import as this CSS?

I haven’t tried it yet, but the .woff or .ttf files should be able to be stored in Glide itself. I think it will work.

> [@Himaladin](#):
>
> ```auto
> @font-face {
> font-family: 'FormaDJRDisplay';
> src: url('https://raw.githubusercontent.com/drAkeSteinn/Video-HP/main/FormaDJRDisplay-Regular.woff') format('woff');
> font-weight: normal;
> font-style: normal;
> }
> 
> /* Applies to the entire application */
> #app-root {
> font-family: "FormaDJRDisplay";
> }
> 
> /* Apply for floating button */
> .floating .button-text{
> font-family: "FormaDJRDisplay";
> }
> 
> ```

If you want to try this font, you should disable ‘compiled css’, because if applied across the entire app, you will need to access #app-root or at least #page-root.

---

<div class="post-metadata">

**Author:** ![Eduardo.Miranda](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eduardo.miranda/32/21913_2.png) [@Eduardo.Miranda](https://community.glideapps.com/u/Eduardo.Miranda)\
**Post date:** [December 8, 2024, 6:54pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/7 "2024-12-08T18:54:27Z")

</div>

@Himaladin  
Thank you very much for the help, I was able to load the font and it works very well.

Disable the “Use compliled CSS” option and it loads the font perfectly.

I have a question, What is the difference between using or not using this option “Use complied CSS”?

Since enabling it doesn’t work, but as you say, disabling it does work.

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 8, 2024, 7:23pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/8 "2024-12-08T19:23:42Z")

</div>

The only difference is the narrower scope of elements when it’s enabled. Some elements are restricted and cannot be accessed. 😉

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [December 9, 2024, 10:06pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/9 "2024-12-09T22:06:45Z")

</div>

> [@Himaladin](#):
>
> ```auto
> src: url('https://raw.githubusercontent.com/drAkeSteinn/Video-HP/main/FormaDJRDisplay-Regular.woff') format('woff');
> 
> ```

Sorry, but I’m a bit of a novice in these things. How do I upload a custom font and generate this link to add to the CSS?

I tried here, but I couldn’t do it 😬

---

<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:** [December 9, 2024, 11:29pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/10 "2024-12-09T23:29:32Z")

</div>

Have you tried uploading it to Glide itself with a file picker?

---

<div class="post-metadata">

**Author:** ![Eduardo.Miranda](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eduardo.miranda/32/21913_2.png) [@Eduardo.Miranda](https://community.glideapps.com/u/Eduardo.Miranda)\
**Post date:** [December 10, 2024, 1:38am UTC](https://community.glideapps.com/t/import-custom-fonts/78407/11 "2024-12-10T01:38:39Z")

</div>

Try enabling the “Preview custom css” option and disabling “Use compiled CSS”

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

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [December 10, 2024, 2:02pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/12 "2024-12-10T14:02:58Z")

</div>

No, is that work?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [December 10, 2024, 2:16pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/13 "2024-12-10T14:16:53Z")

</div>

Do you have the font file with .woff or .ttf extension?  
This is just a regular url where the file is stored. How about you test using this file [https://raw.githubusercontent.com/drAkeSteinn/Video-HP/main/FormaDJRDisplay-Regular.woff](https://raw.githubusercontent.com/drAkeSteinn/Video-HP/main/FormaDJRDisplay-Regular.woff).  
Download it and upload it to Glide with the file picker. Replace the URL with your URL in this section: src: url(‘URL’) format(‘woff’);

---

<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:** [December 10, 2024, 2:20pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/14 "2024-12-10T14:20:10Z")

</div>

At the end of the day, you can upload it anywhere, just make sure it’s accessible.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [December 10, 2024, 5:47pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/15 "2024-12-10T17:47:57Z")

</div>

Perfect, I’ll test here

* * *

I’ve tested with google fonts, and works perfectly 🤩

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [December 10, 2024, 6:47pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/16 "2024-12-10T18:47:54Z")

</div>

Fire 🔥

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/e/2e69a4177045fabdb4749aa96c348bb7d39d88b1.jpeg)

Thank you guys! @Himaladin @ThinhDinh

---

<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:** [December 10, 2024, 11:51pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/17 "2024-12-10T23:51:46Z")

</div>

That’s gorgeous! Do you have that font from a client or is it publicly available?

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [December 13, 2024, 7:17pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/18 "2024-12-13T19:17:31Z")

</div>

Thank you brother!

> [@ThinhDinh](#):
>
> Do you have that font from a client or is it publicly available?

It’s a free one

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [December 20, 2024, 7:17pm UTC](https://community.glideapps.com/t/import-custom-fonts/78407/19 "2024-12-20T19:17:39Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.