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.
@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;
}
I currently have a Team plan that allows me to use CSS
Sorry for my bad english 
Use the selector: .floating .button-text or copy the following code into your custom css box:
@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";
}
@Lucas_Pires Maybe you can try this.
So do I just upload the font in GitHub and import as this CSS?
I tried this code in one of my apps, but didn’t change the font
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.
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.
@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.
The only difference is the narrower scope of elements when it’s enabled. Some elements are restricted and cannot be accessed. 
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 
Have you tried uploading it to Glide itself with a file picker?
Try enabling the “Preview custom css” option and disabling “Use compiled CSS”
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.
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’);
At the end of the day, you can upload it anywhere, just make sure it’s accessible.
Perfect, I’ll test here
I’ve tested with google fonts, and works perfectly 
Fire 
Thank you guys! @Himaladin @ThinhDinh
That’s gorgeous! Do you have that font from a client or is it publicly available?
