# How to change Font with Custom CSS

**URL:** <https://community.glideapps.com/t/how-to-change-font-with-custom-css/83204>\
**Category:** Ask for Help\
**Created:** [July 16, 2025, 12:24am UTC](https://community.glideapps.com/t/how-to-change-font-with-custom-css/83204 "2025-07-16T00:24:30Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rshrivastava](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rshrivastava/32/89106_2.png) [@rshrivastava](https://community.glideapps.com/u/rshrivastava)\
**Post date:** [July 16, 2025, 12:24am UTC](https://community.glideapps.com/t/how-to-change-font-with-custom-css/83204/1 "2025-07-16T00:24:30Z")

</div>

Hello, I have purchased the Pro Plan with the intention of customizing the font in my app. I would like to use the following fonts:

> **[Gravesend Sans | Adobe Fonts](https://fonts.adobe.com/fonts/gravesend-sans)**
>
> A sans serif typeface with 6 styles, available from Adobe Fonts for sync and web use. Adobe Fonts is the easiest way to bring great type into your workflow, wherever you are.

> **[Poppins - Google Fonts](https://fonts.google.com/specimen/Poppins)**
>
> Geometric sans serif typefaces have always been popular, and with support for both the Devanagari and Latin writing systems, Poppins is an internationalist addi

For example, I would like to use the ExtraLight variation of Poppins. I wanted to set it up as a Global font just to see how it works

.poppins-extralight {  
font-family: “Poppins”, sans-serif;  
font-weight: 200;  
font-style: normal;  
}

In the Custom CSS box (Settings → Appearance) this is what I have entered:

@import url(‘[https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap](https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap)’);

.poppins-extralight {  
font-family: “Poppins”, sans-serif;  
font-weight: 200;  
font-style: normal;  
}

This did not change the font, even removing the import statement did not chnage the font to what I wanted, it just went to default Sans Serif. I saw that online that we cannot import fonts into the Glide App, so is there another way to show custom fonts in the app?

tldr; How can add a custom global font to my app using the Custom CSS feature on the Pro Plan? Would appreciate any help! Thank you.

---

<div class="post-metadata">

**Author:** ![Mazen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mazen/32/84042_2.png) [@Mazen](https://community.glideapps.com/u/Mazen)\
**Post date:** [July 16, 2025, 12:52am UTC](https://community.glideapps.com/t/how-to-change-font-with-custom-css/83204/2 "2025-07-16T00:52:58Z")

</div>

Check this out:

> [@input\_latin\_lowercase Using Google Fonts in your Glide App!](https://community.glideapps.com/t/using-google-fonts-in-your-glide-app/82224):
>
> waving_hand Hey fellow Gliders! Did you know you can integrate Google Fonts into your Glide app? While Glide offers clean and beautiful built-in styling, adding a custom font can enhance your app’s visual appeal and brand consistency. [[Glide: Add Custom Google Fonts to Your App in 5 EASY Steps! input_latin_lowercase] ](https://www.youtube.com/watch?v=z9pY_UxORec) The process is straightforward: Choose Your Font: Head over to [fonts.google.com](http://fonts.google.com) and select the desired font for your app. Grab the @import Code: Once you’ve chosen your font, select “…