External link indicator is very small on mobile

[trevorshannon]

On a Pixel 3 running Chrome 104.0.5112.69 the up-right arrow indicating an external link in the affordable housing search results is very small. See it below after "View property website"

[trevorshannon]

This seems to be related to the fact that chrome on desktop renders the up-right arrow (↗) differently than chrome on android. See the below screenshots which print the up-right arrow HTML character at the same font size as the neighboring text.

Chrome on Mac:

Chrome on Android:

So when the font size is set a bit smaller for the superscript arrow, it becomes unreasonably small on Android.

We may have to just bite the bullet and make an icon for that indicator.

[DairyProducts]

On Safari for iOS 17.5.1 (21F90) running on an iPhone 13:

That is the northeast arrow emoji used as part of the default iOS fontpack. I suspect that the font used on the website whether downloaded in a CSS file or otherwise doesn't support this character and the web browser falls back to the default font of the operating system, whatever that may be.

Perhaps declaring a fallback font would fix this, like Segoe UI. I haven't checked that specific character but I think it would work fine as it's used by Microsoft in a lot of their applications. Once we declare such a fallback font, we can guarantee the same arrow will appear on all platforms. If the arrow is mis-sized then, we can surround it with inline CSS to make it bigger.

[trevorshannon]

The font we use is called Inter. Maybe you can check if it has that character and then one of us can add it to the subsetted font file we have.

[DairyProducts]

This symbol seems to be defined for Inter-Regular-01 extracted from the Inter.ttc file found on the Inter website:

I did notice that in fonts.scss that there is a unicode range, which does not include U+2197. Perhaps therein lies the answer.

Also in my research on this topic I read somewhere that modifying a font pack may be against its license terms. That may have to be a consideration here.

[trevorshannon]

We use a subset of Inter (which to my knowledge is perfectly fine) so you could try replacing our font file with the full inter font and see if that fixes it and then adjust the subsetted font file to include the glyph we need for a production fix. Here are my notes on subsetting from when I needed to add some non-English characters a while back:

https://barrd.dev/article/create-a-variable-font-subset-for-smaller-file-size/

for spanish, english, and vietnamese:

pyftsubset Inter-Variable.ttf --unicodes="U+20-5F,U+61-7A,U+7C,U+A0,U+A1,U+A7,U+A9,U+AB,U+BB,U+BF-C3,U+C8-CA,U+CC,U+CD,U+D1-D5,U+D9,U+DA,U+DC,U+DD,U+E0-E3,U+E8-EA,U+EC,U+ED,U+F1-F5,U+F9,U+FA,U+FC,U+FD,U+102,U+103,U+110,U+111,U+128,U+129,U+168,U+169,U+1A0,U+1A1,U+1AF,U+1B0,U+1EA0-1EF9,U+2010,U+2011,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2020,U+2021,U+2026,U+2030,U+2032,U+2033,U+20AC" --layout-features="*" --flavor="woff2" --output-file="Inter-Variable-subset.woff2"

I think I also used https://fontdrop.info/ at some point as an aid

[DairyProducts]

I see that the font source files use .woff or .woff2. Is there an advantage to this file format or would .ttf work as well? I have the full Inter font in .ttf format.

[trevorshannon]

woff is meant for websites, but pyftsubset can generate the woff from the ttf (see command above)

[trevorshannon]

Oh, and by the way we do have the source ttf file checked in, but it's probably the same as the one you downloaded.