Coding Web Fonts

[00:00:00]
>> Jason Pamental: So what I thought I'd do, is I'm gonna start out with just taking that page with plex. So this is in the part-05 folder.
>> Jason Pamental: I'm gonna actually make a copy of this, and strip out a few things so we can see what it looks like without any of this stuff in place.

[00:00:36]
>> Jason Pamental: So If I just yank all of this stuff out of here, what we end up with is still a perfectly valid readable page. It's just not gonna have any of the styling and I can even take out all of the CSS.
>> Jason Pamental: And if I go back and look at this in the browser.

[00:01:19]
>> Jason Pamental: So It may not be pretty, but it's an h1, an h2, some text, it's all broken up in paragraphs, there's still a block quote set apart. It's not the easiest thing, but if that's what got delivered, somebody could still read it. And because we haven't put any explicit impositions on it, it's going to work and reflow and still be usable no matter what device you view it on.

[00:01:49]
So this is about enhancing now. So we want to build up and experience from there and so you know the easy thing to do is simply add in the styles. And that's going to bring it back to looking like it should look. But it's not really going to have the whole picture.

[00:02:09]
So if I put those things back in, I still don't have any of the JavaScript loading in there which means we're also not gonna get the class switching. But what we can get is the basic page. So all we've really done is look at, excuse me. And one thing that I didn't mention about this, the way this project is set up.

[00:02:37]
I am using NPM to add a bunch of stuff in there for Gulp to run SASS and a little local server. It's not necessary. I've checked in all of the compiled CSS, that's all in the CSS folder. You don't have to run all of this build process stuff.

[00:02:54]
It is a little bit cumbersome, it's just more of a convenience for me to write the CSS faster this way. So that it keeps it a little bit clean and neater for you at the end. So this is the web font declarations. So this is the same file that's being loaded on all of them.

[00:03:14]
Just so I don't have to make a bunch of them tailored for each project. The important thing to note is just because you have it in your @font-face declaration doesn't mean those files are gonna get loaded. So that's actually not a problem to list every possible variant that you might call in here until you reference it in your CSS with a font family declaration.

[00:03:38]
Then it won't trigger a download on those files. So this is where you put things like font display. So for a standard web font like these ones for Plex Serif, the way you would load them. So this is kind of our standard kind of body copyish sort of thing.

[00:03:58]
So we're loading the regular and giving it the keywords normal for style and font weight. And that means that the browser will equate it to whatever normal is. Then when it's bold we just specify font weight bold, font style italic, or bold italic. Notice the font family is the same.

[00:04:21]
So that's how you can tell the browser to behave, when I have specified this font family if I use a strong tag, reference this font file. If I use an italic, reference this font file. That way you don't have a browser faking it. Because some will, and it looks really terrible.

[00:04:41]
You wanna make sure that you're calling a proper italic type face, or a proper bold type face, so that it actually has the design that the designer actually intended, without some of the muddiness or incorrect characters being shown by a browser trying to fake an italic. So-
>> Student: Wait, we might be faking it.

[00:05:03]
>> Jason Pamental: So technically they call it synthesizing it. Firefox will do this in particular and I think it's a terrible practise. I think Chrome does it as well. if took this out here and didn't include an actual italic mapped this way and I set some text with the font family of Plex Serif and then wrapped an m tag around it or an i tag, the browser will fake an italic out of it.

[00:05:37]
It will take that typeface and try and render it slanted. And the problem with that is it's quite often going to be not at a particularly readable angle for that type face and it's also gonna be missing out on the correct spacing and clip substitution. So it may be readable and some people might not notice but it's not really going to be particularly correct or desirable from a truth to the design standpoint.

[00:06:06]
>> Jason Pamental: There are a lot of people in the web community from a development and performance perspective who think it's a good thing that browsers will do that. I have never encountered anybody who actually cares about design to think that's an acceptable thing. It's sort of unfortunate that browsers adopted that practice in the first place.

[00:06:30]
Because in most cases, especially when you're dealing, previously when we were dealing with system fonts, italics were always there. It didn't matter. There was no reason for the browser to actually do that in the first place, because that stuff was already available on the system