Import Custom Fonts?

Ask for Help
1

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;
}

image
image1218×809 38.9 KB

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

2

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";
}
2 Likes
3

@Lucas_Pires Maybe you can try this.

1 Like
4

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

5

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

6

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.

2 Likes
7

@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
image1298×528 97 KB

2 Likes
8

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

1 Like
9

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 :grimacing:

10

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

1 Like
11

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

image
image477×494 28.1 KB

1 Like
12

No, is that work?

13

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’);

1 Like
14

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

1 Like
15

Perfect, I’ll test here

I’ve tested with google fonts, and works perfectly :star_struck:

2 Likes
16

Fire :fire:

image
image1595×1104 128 KB

Thank you guys! @Himaladin @ThinhDinh

5 Likes
17

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

1 Like
18

Thank you brother!

It’s a free one

1 Like
19

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