# How change the font type in the title in appbar

**URL:** <https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679>\
**Category:** Ask for Help\
**Created:** [January 25, 2022, 5:09pm UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679 "2022-01-25T17:09:03Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [January 25, 2022, 5:09pm UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/1 "2022-01-25T17:09:03Z")

</div>

Greetings to all. I would only need to change the font type in the title in appbar and I can do it easily, but also in the title that appears after scrolling a list. I can do it by taking the class of the object, but I would like something more stable that doesn’t change with the change of a variable. Do you have any suggestions for me? Thanks! @ThinhDinh @Lucas_Pires …

---

<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:** [January 25, 2022, 5:18pm UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/2 "2022-01-25T17:18:25Z")

</div>

> [@profxeni](#):
>
> appbar

where exactly?

---

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [January 25, 2022, 5:21pm UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/3 "2022-01-25T17:21:03Z")

</div>

When you scroll through a list, the title shrinks. That title should have a different font.

---

<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:** [January 25, 2022, 11:37pm UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/4 "2022-01-25T23:37:28Z")

</div>

Can you show us some screenshots or a video? Thank you.

---

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [January 26, 2022, 2:13pm UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/5 "2022-01-26T14:13:56Z")

</div>

![Image-1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/5/95cd856f91ca364262dcffccd72f3a1dbe24f54b.jpeg)  
 ![Image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/d/4d7dd3814c7ab7a70d78e41d95ee04b8b6b426f8.jpeg)  
 ![Image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/7/67f643e58d468fa4534e79eca644e626f9769ecf.jpeg)  
In the meantime, thank you for your help.  
Editing the text with a font of my choice concerns the title in the top bar, the subtitle when scrolling the list and the title just below (following the red arrow) Title and subtitle I managed to edit, but with classes that are changed every now and then: e.g. .0Xvbut.  
So I would need a class that I wouldn’t lose again.  
Thanks!

---

<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:** [January 26, 2022, 11:30pm UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/6 "2022-01-26T23:30:52Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/a/6a498bb19f27ef0aa574db971c7a9b8fd5dbfba2.jpeg)

Does this screenshot mean you want to edit the inline list title as well? If yes, how do you want it to be?

---

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [January 27, 2022, 2:38pm UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/7 "2022-01-27T14:38:37Z")

</div>

I would like to use the same font as the title in the topbar.

---

<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:** [January 27, 2022, 11:38pm UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/8 "2022-01-27T23:38:29Z")

</div>

What type of font are you setting for this app?

---

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [January 28, 2022, 5:35am UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/9 "2022-01-28T05:35:44Z")

</div>

Google font “Acme”.

---

<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:** [January 28, 2022, 12:47pm UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/10 "2022-01-28T12:47:51Z")

</div>

So that “logo” up there with the text “Luoghi” is custom CSS?

---

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [January 28, 2022, 3:35pm UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/11 "2022-01-28T15:35:15Z")

</div>

This is the CSS I’m using and it works…now.  
The problem is the second part, the part about the subtitle, which is the title that appears when you start scrolling down the list. At the moment I developed the class with the inspector (.NigHU), but I noticed that it can change and therefore is not reliable.  
Can you suggest me other strategies?  
Thanks @ThinhDinh

```auto
<pre><span><style>

@import url('https://fonts.googleapis.com/css2?family=Acme&family=Englebert&family=Ubuntu+Condensed&display=swap');

[data-test="glide-app-bar"] >div >div >div >div {

font: 50px/0.4 "Acme", Helvetica, sans-serif;
letter-spacing: 0.2rem;
text-align: center;
padding:10px;
color: rgb(255, 255, 255);
}

.NigHU {
    -webkit-box-flex: 1;
    flex-grow: 1;
    text-align: center;
    font-weight: 400;
font: 20px/1.2 "Acme", Futura, "Roboto", "Trebuchet MS", Helvetica, sans-serif;
    color: rgb(255, 255, 255);
    white-space: nowrap;

}

```

---

<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:** [January 28, 2022, 11:51pm UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/12 "2022-01-28T23:51:14Z")

</div>

Nice use of import!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/f/afcc3ea868956b349a7804bd127e12ef1283fafb.jpeg)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/d/5d65d8bb7794426a094161bc81df8b99147242c4.jpeg)

Seems like the smaller title is a bit aligned to the left due to the configuration of the font but I’m pretty sure you can change that if you want with a bit of margin/padding.

```auto
<pre><span><style>

@import url('https://fonts.googleapis.com/css2?family=Acme&family=Englebert&family=Ubuntu+Condensed&display=swap');

[data-test="glide-app-bar"] >div >div >div >div {
font: 50px/0.4 "Acme", Helvetica, sans-serif;
letter-spacing: 0.2rem;
text-align: center;
padding:10px;
color: rgb(255, 255, 255);
}

[data-test="glide-app-bar"] [aria-label="Luoghi"] {
font: 30px/0.4 "Acme", Helvetica, sans-serif;
letter-spacing: 0.2rem;
text-align: center;
padding:10px;
color: rgb(255, 255, 255);
}

[data-test="app-horizontal-list"] >div >div {
-webkit-box-flex: 1;
flex-grow: 1;
text-align: center;
font-weight: 400;
font: 20px/1.2 "Acme", Futura, "Roboto", "Trebuchet MS", Helvetica, sans-serif;
color: black;
white-space: nowrap;
}

[data-test="app-vertical-list"] >div >div {
-webkit-box-flex: 1;
flex-grow: 1;
text-align: center;
font-weight: 400;
font: 20px/1.2 "Acme", Futura, "Roboto", "Trebuchet MS", Helvetica, sans-serif;
color: black;
white-space: nowrap;
}

```

---

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [January 29, 2022, 8:59am UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/13 "2022-01-29T08:59:01Z")

</div>

Thanks @ThinhDinh  
was just what I was looking for, also as teaching the various glide classes. Surely it can be of use to other people as well.  
I’m a retired designer and programmer… and much more, but I’m getting deeper into CSS with glide and thanks to you, especially you, I’m getting a better understanding of these codes.

---

<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:** [January 29, 2022, 11:50am UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/14 "2022-01-29T11:50:32Z")

</div>

My pleasure! I love this font, please share your CSS snippets as well when you have a chance.

---

<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:** [January 30, 2022, 11:50am UTC](https://community.glideapps.com/t/how-change-the-font-type-in-the-title-in-appbar/37679/15 "2022-01-30T11:50:47Z")

</div>

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