Python Web Apps that Fly with CDNs Transcripts
Chapter: Fonts
Lecture: Using Bunny fonts
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Here we are in our website, still running. We still have ngrok running in the background and we have it running the Python Flask app
0:08
running in PyCharm. Same as always. I've actually changed, moved to a new set of code here just so you have an exact copy of what we're working with
0:18
for this chapter as I have been for all of them. Again, unmark all the other source routes and set this one and set this to run here.
0:27
You can see it's already running. chapter seven fonts is up and going. So I haven't made any changes there yet, but we'll
0:35
have that new code to work with. Now, you can see there's some nice fonts here, this
0:39
cool little super thin font there, and come around and search and sure enough, this is
0:44
working a nice and fast. Right, just like we would expect. So we do a view source. Yeah, There we go. We have our Google Fonts in here.
1:02
Now how do we fix it? Well, we could just do a find and replace and that would be well and good.
1:11
But let's just go to fonts.bunny.net real quick and just have a look.
1:14
So I want to show you how to use the site just in case you're not super familiar with it. It's not honestly entirely clear how to use it.
1:22
But if you've already got one of these, we can fix it by doing that find and replace.
1:26
But let's suppose we want to come down here, you can see 1492 families, just like Google fonts. Back that off a little.
1:35
So let's say that this one is a really cool font that we might want to use, maybe that one. All right.
1:42
So you can come down here and it'll show you examples. Apparently, this one only has the normal 400, like strong or thin or italics or anything,
1:52
just this, just this was the only version. So what we can do is we can click add variant. Now over here, if we open this up,
1:59
it shows us how to use it in CSS, or this is the actual CSS statement, or you can see the actual HTML thing to link to it like we saw in our example.
2:11
We can also go and say, okay, not just that one, but let's go back here and say we also would like, that we also want this particular one.
2:22
So it's got its one variant, And then we'll do one more, I suppose. Let's get a thin one like this advent row.
2:30
And we can get a super thin and then a normal variation. And we go back to our fonts here, you can see right there, it's exactly what I described
2:39
with the Google API, where it's got the different families and strengths all put together. So we can come over and just put that into our code.
2:48
So that's how you use this site. Let's go and change it here. Remember all this stuff for the overall look and feel is in this layout thing.
2:58
We got our to do fonts that is out. And what I'm going to put is fonts.bunny.net. Run it again. Over here, refresh this, you can see here's our fonts.
3:13
Let's click on it, make sure it works. Sure enough, it does.
3:17
And what it does is it pulls a CSS file that then links to all these secondary files there, which is pretty cool. And we refresh it.
3:27
It looks exactly the same. Should it look any different? No, because what we have going on here is exactly the same font family, just the way
3:36
we're getting it to our users is a little bit better, I would say. So we go to DevTools, we can look right there, see our fonts coming back 200 AOK.
3:50
I suppose if I hit it a second time, you should see those straight out of memory cache like all the other CDN things. So pretty excellent.
3:59
Here's the thing. If you've got a website that is using Google Fonts, go read that article, do a little research,
4:08
Do some soul searching, see how you feel about fonts.googleapis.com and consider using bunny.net.
4:15
For me, it's a no brainer at all because we're already using bunny.net for stuff that's more
4:21
important for our site like CSS, JavaScript, and images than just the fonts. One more way to plug into that system doesn't bother me at all.
4:31
If that were the only thing you're using, maybe you got it aside. To me, it seems like a really great service,
4:36
and I definitely use it on our websites, for example. Right there, huh? Indeed, so great service, and by the way,
4:51
I guess you're already using it as well because you came to this website to watch this video, right, unless you're using the mobile app.
4:58
You could also throw in a pre-connect here, just like we did for the other CDN pieces, but I didn't put that over here on this page
5:08
because literally the very first thing that the browser hits is go get this style sheet from that location.
5:18
And so same pre-connect and then get the thing immediately seemed a little bit, I don't know, like unnecessary,
5:24
but you could certainly add a pre-connect there, a little Explorer example up here as that pre-connect string for you if you want it.