How change the font type in the title in appbar

[profxeni]

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 …

[Lucas_Pires]

@profxeni

appbar

where exactly?

[profxeni]

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

[ThinhDinh]

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

[profxeni]

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!

[ThinhDinh]

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

[profxeni]

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

[ThinhDinh]

What type of font are you setting for this app?

[profxeni]

Google font “Acme”.

[ThinhDinh]

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

[profxeni]

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

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

}

[ThinhDinh]

Nice use of import!

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.

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

[profxeni]

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.

[ThinhDinh]

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