Variable Fonts Fallback

[00:00:00]
>> Jason: This is actually set up so that if the browser does not support variable fonts, then it won't load it, and it will load Fira instead. And then it will put up this message. I should be able to pull this page up in the normal version of Firefox.

[00:00:19]
If I quit out of that, I forced this version of Firefox to not show the variable fonts.
>> Jason: Let me see if I have that,
>> Jason: There we go.
>> Jason: And this is because this demo is meant for monotype to show everybody. There's still plenty of people that might have a browser that doesn't support it.

[00:00:45]
They still get the essay, they can still read it. The typography is still, it's okay, it's not as, maybe as refined as I'd like it to be. But, they can still get the point and they can still take something away from this. And they get that message that let's them know this is why you're seeing it this way.

[00:01:05]
So that's set up. And these components so here's what it looks like add supports forge variation settings normal. Meaning, if that's true execute the CSS in between. So in this case, I'm using the make sure nobody sees it ever CSS that Sets of display, the visibility, everything to get it out of the way so it's totally removed from the document flow.

[00:01:32]
Using not, meaning it negates the condition. So if it does not support font variation settings, I remove my example ampersand animation, and then I add in, I display my note support message. So, that way I can kind of tie these things together. And if the test fails, they're gonna get the message because I'm not hiding it based on font variation settings being supported.

[00:02:07]
So this is another one of those examples of trying to decide where you need to determine the level of support, and what happens when things fail. So at supports is pretty well supported but it's not universally supported, and if it's not supported it's certainly not gonna support variable fonts.

[00:02:26]
So, where is that condition of failure? I wanted to make sure that if all of this stuff falls apart, there still gonna get some text on the screen and they're gonna get the message that tells them, why? Why is this not working? So, now, it's kind of interesting example to one place I haven't been able to deal with this effectively yet is in Safari 9 in earlier.

[00:02:49]
Loading the variable font will crash the browsers straight out, and I haven't quite figured out how to trap for that yet. If handled most of the other scenarios that are likely to come up to make sure that this sample page functions to get the content across, and then hopefully, if the browser supports it with the design that we'll make it sing.

[00:03:15]
>> Jason: Let's see if I have, up at the top here. There we go.
>> Speaker 2: I have a question.
>> Jason: Yeah, go ahead.
>> Speaker 2: If you have at supports, and your condition is, if that doesn't load, if you have the supports one within that conditional, why do you have to also put it in the condition that it did load?

[00:03:41]
What does that do for you?
>> Jason: There were two things that I wanted to change. If it was supported, I wanted to make sure the warning message is nowhere to be found. If it's not supported I want to make the example go away. So, I really wanted to make sure I was dealing with those conditions separately, so that I can not sort of the minimum amount of code rewriting to say, if the condition is true.

[00:04:14]
Cuz I'm doing the same thing up here, where I'm only loading Fira, Sans if they don't support variable fonts. And so if that test fails, okay, load this, and that's the CSS that I'm gonna use. And then down below, right down here,
>> Jason: I apologize if this is giving anybody vertigo.

[00:04:40]
So it's two different elements that I want it to act on, and I want it to do different things to them. And that's why I didn't, I only wanted to move the support message if this was true and it does support variable fonts. I wanted that one specifically, because otherwise, if everything fails including the check for at support.

[00:05:13]
Then, I want them to see that no support message. That's why I wanted to have that one there explicitly. And then, if it succeeds in checking for variable fonts not working, then I wanna move the ampersand animation out of the way.
>> Speaker 2: Yeah.
>> Jason: So-
>> Speaker 2: But why do you have to have the no support message within, if it's worked?

[00:05:42]
>> Jason: Well, that's where I'm turning it off.
>> Speaker 2: Okay, [CROSSTALK] defult is.
>> Jason: Right, the default is that it'll show up. So, like in Firefox it just, it moves the ampersand stuff out of the way and it leaves the support message where it should be.
>> Jason: I'm a little mixed, but the reason I wanted to separate those things was so I could think about them, and deal with them consistently.

[00:06:13]
So if it doesn't load, doesn't support it, load the non variable font, and do this thing over here. My normal condition is if there is a warning message, if it does support the variable fonts now remove that. So it's really more of a mental thing for me, but it's also what is the default?

[00:06:34]
And the default I want it to be the warning message is present.
>> Jason: So with this combination, now I went serve the inverse way and I said up top that I only wana to load Fira Sans if it does not support variable fonts because this is a variable font demo.

[00:07:06]
That was the whole point. I think that were you to think about putting variable fonts into production today. I would go the opposite routes and say, if supports is true now load the variable fund, and then scope all your font family assignments in the similar manner at supports font variation settings, normal.

[00:07:32]
Then replace your font family declarations with the variable font, and add in all the CSS that you want to govern that type of graphic system. So that was as soon as that test starts passing everywhere it just works. And eventually, then you can rip out the other stuff.

[00:07:52]
But it's pretty safe for you to start to put that in production today. Because if you have it scoped that way, it's only gonna pass in a browser where it supports variables, calculations at supports, future detection, and variable fonts. You can kinda get them all of those things together if the variable font test is true.