Issues on Mobile

[Blackglade]

I can't seem to get this font to work for me on mobile devices and I'm not sure what I'm doing wrong. Both google fonts + your website is able to display it fine on mobile, but I simply get black text.

Here is my css:

@import url('https://fonts.googleapis.com/css2?family=Nabla:EDPT,EHLT@150,12');

#name {
  font-family: 'Nabla', Helvetica, sans-serif;
  font-variation-settings: "EDPT" 150, "EHLT" 12;
  font-palette: --Nabla;
}

@font-palette-values --Nabla {
	font-family: 'Nabla';
	base-palette: 1;
}

All I get is this:

<h1 id="name">Text Text</h1>

Any idea what I am doing wrong?

[justvanrossum]

When you say "Mobile", do you mean Android? Because I'm fairly sure COLRv1 fonts don't work yet on iOS in any browser.

Otherwise I have no idea to be honest :( Your CSS looks fine, and works fine in codepen on Chrome on my computer.

@davelab6, @chrissimpkins, what could be a good support channel for questions like this?

[Blackglade]

Ahh I meant iOS. Sorry should have clarified. I like this font so much I'm using it on my personal site: https://harshbaid.com/ which unfortunately appears black on my phone.

I looked up: https://caniuse.com/mdn-css_at-rules_font-palette-values_base-palette and figured it would be compatible on Mobile, but never thought to check COLRv1 support. Still I'm curious how google fonts and codepen are able to render it on mobile

[justvanrossum]

I don't see it working (in color) on iOS, neither on the googlefonts site, from from typearture: all I see is black letters.

I thought googlefonts would serve an SVG fallback in that case, but perhaps I'm wrong.

[justvanrossum]

I like this font so much I'm using it on my personal site: https://harshbaid.com/

Thanks for sharing, it's great to see it in use!

[Blackglade]

I don't see it working (in color) on iOS, neither on the googlefonts site, from from typearture: all I see is black letters.

Oh yes it seems you're right. I was using a user-agent mod on safari to mimic a mobile device and it appeared fine. Actually viewing it on my phone and it seems it's not working.

I suppose this issue can then be closed. The simple answer is iOS browsers don't support this font yet. Sorry for the trouble!