Some glyphs not displayed in select tag

Hi guys,

we have the following problem when using a font created with Glyphs in our website interface. In the interface there is a select drop-down menu, in which we are displaying glyphs from our icon font. For some of the glyphs this works just fine, they are both displayed in the drop down menu and also when the menu is closed, suggesting that the method in general works fine. Some glyphs however don’t want to show up in the drop down menu. Yet they are still displayed correctly when the menu is closed, reassuring us that the correct unicode is referenced in the code.

As visible in the attached screenshot, all the glyphs from 24B6–24B8 are displayed correctly, while the following glyph 24B9 is only displayed with the default fallback font. As the glyph 24B9 was added more recently, we thought about cache issues of course, but this happens in several browsers and on different devices, same as with some older glyphs, and therefore doesn’t seem to be related to the font version. We are using the default select/option tags from html with our font family referenced as a css class.

I know that this is not a lot to go on, but maybe somebody has experienced something similar before or has some tips on what to try? Thanks, Lukas! 23 29

Perhaps it is overridden by the browser? Since the D displays as expected in the div below, it seems to be not the font’s fault.

Alternatively, some browser/OS combos do not allow overriding of certain glyphs. I know that sometimes emojis are treated that way. These are not emojis but it is thinkable that when the menu item is selected, the browser chooses to have the system take care of the rendering.

Also possible that the selected menu item requires a different CSS treatment.

And it may just as much be a browser bug. Is it the same problem in al browsers? If it only affects certain browsers, you may have a clue.

Hi and thanks for your quick reply.

Upon further investigation we have discovered that the Chrome Browser is indeed able to at least display the Circled D glyph (24B9) in the drop down menu contrary to Safari and Firefox, although it doesn’t show some of the other glyphs as well. In those cases though, those are glyphs from the private use area, which makes me think your explanation regarding browser/OS not allowing the override in those cases might be a possible explanation. Even though other glyphs from the private use area show up just fine in the menu.

We will investigate further and I’ll let you know, if there’s a breakthrough of some sort. Our programmer is also looking into the CSS treatment possibilities you mentioned. Thanks for your input! Lukas

Update: We couldn’t find out what the problem is yet and have used a workaround, in order to not waste more time on the matter. It seems to happen regardless of what area the glyphs are positioned in and therefore seems extremely random. Thanks for the ideas/input anyways! Cheers, Lukas