00:00 To get this CSS file on the page, we need to use a link. We're going to import our font style sheet URL from styles font. Here's our styles font.css. With that, then we can add a rel of style sheet,

00:18 and there's our href, that's our font style sheet URL. Here, let's go ahead and console log that. We can take a look at what that looks like in our console, and there it is, slash build slash underscore assets again, and then slash font, and then fingerprint.css. Anytime we change the CSS file,

00:38 that will automatically change the fingerprint, and so we don't have to worry about invalidating caches or anything like that. It can be cached forever. That's great. You may have noticed also our fonts got updated, so that's exactly what we want. If we look at our elements right here and in our head, we'll have our icon still for our favicon,

00:56 and then our style sheet, and that gets applied. That's all there is to it. Now, we can add global styles, whether it be for fonts or for anything else. In our case, we do have a little bit of CSS going on right here, but a lot of what we're doing is just to import all these fonts.

01:14 You should actually also notice in the network tab, we have our font being loaded right there. We have all these different variations because different browsers have different font files that they support, and that's all supported right in here as well. But the point is that to get CSS onto the page,

01:31 some global CSS unprocessed and everything, you simply import it with a.css at the end, and then you can use that URL in the href for your links. Again, we could add the link right here if we wanted to do it that way, but it is better to stick it in here for the type safety that you get,

01:51 as well as the ability to move this anywhere that you want to as far as nested routing is concerned. I mentioned that this is unprocessed. It is slightly processed, and we can take a look at our public build assets, and here's our font. You'll notice it is formatted,

02:10 some of the CSS or the comments are removed, and adds a comment to the top. So there's a little bit of processing going on, and we'll actually talk about some additional processing that you can do with Remix and this style of import for CSS.

02:28 So we'll take a look at that in a future exercise. But this is how you get CSS onto the page in a Remix app.