How would I specify a condensed or narrow font for a DropDown?

Anvil Q&A
1

That is, using the standard Anvil-provided DropDown properties?

2

Does this work for you:

edit:

Actually, just typing Open Sans Condensed directly into the font property worked for me without any additional css.

the following is (possibly) not needed

/* In theme.css */
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed&display=swap');

.anvil-role-drop_font {
  font-family: "Open Sans Condensed", sans-serif;
}

You would need to create a custom role for your drop down component.

sc2

I realize that this is not a standard Anvil-provided property for drop downs.

1 Like
3

I think I still need the @importā€¦

4

Interesting. Here is a clone that Iā€™m using. I donā€™t belive it has an @import in the theme.css as far as I can see. I could be missing something. Possibly browser differences.

https://anvil.works/build#clone:UGLE5VPHISSVQRER=UAC4TFSL24GLYKBSBVLIVGMG

5

Thanks, Alan. In my browser, entering Open Sans Condensed gets me a slightly smaller serif font. Definitely not a sans-serif, and definitely not condensed.

6

I see. Okay, perhpas the ā€œroleā€ and @import route will help to force things.

7

I pasted that at the end of my appā€™s theme.css, but it made no difference.

Ah, but did not create the Roleā€¦ stand byā€¦ no luck.

Not a huge deal. Iā€™ll dig into Roles and theme.css some other time. If I find an easy solution, Iā€™ll post it here.

Thanks for your efforts.

8

Try placing the CSS and import at the top of your theme.css. In my testing, it needed to be at the top.

Or just clone this to see if it works.
https://anvil.works/build#clone:UGLE5VPHISSVQRER=UAC4TFSL24GLYKBSBVLIVGMG

9

Iā€™ve cloned it, thanks. Same result. Even pasted Open Sans Condensed into the font field. Puzzling.

Iā€™m using Chrome Version 79.0.3945.130 under Windows 10, but I doubt that has anything to do with it.

10

Iā€™m at a loss. How odd.

11

I did the following to @alcampopiano clone and it worked for me

in standard.html you can see the line where anvil link to the google font so do the same thing:

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">

then remove the @imports from theme.css which isnā€™t necessary with this methodā€¦

2 Likes
12

Thanks Stu. I knew you could help!

I was drawing from the custom font tutorial.

Iā€™m unsure why it works for me but not others.

13

:man_shrugging: not sure

14

@stucork, Iā€™ve tried it. Works for the clone, but not for my app.

For now, Iā€™m just setting my font size a little smaller. I have other ways to deal with the page layout. Itā€™s not critical.

15

Oh no :man_facepalming:. When you get a moment you should share a clone link that doesnā€™t workā€¦ weā€™ll fix it :wrench:

1 Like
16

:construction_worker_man:

(actually, Iā€™m fairly certain the fix is beyond my understanding)

17

Cloning our 2.5-year-old app with over 1MiB of proprietary code, and substantial data, to demonstrate a minor issue like this, is probably not in the cards.

If I can find a way to quickly reproduce it in something small, then I can clone that for you. And if our priority on this issue goes up enough, Iā€™ll attempt it.

2 Likes