Changing Type Faces

[00:00:00]
>> Jason Pamental: This really kind of covers the basics of adding this in here. If we wanted to change the typefaces that are being called here, it actually would be relatively easy to do. We could go to Google.
>> Jason Pamental: You could really kind of pick anything. So, if we wanted to change it from Plex to, I don't know, Merriweather that's a nice type face.

[00:00:31]
And down here customize it, so we can get regular italic and bold and bold italic. And this will give us this link to CSS.
>> Jason Pamental: So if all I did was going here.
>> Jason Pamental: Come on and instead of this file, paste in this, and change this to Merriweather.

[00:01:12]
And then if I were to go in and change this also.
>> Jason Pamental: Let's make sure I have that naming right. So let's go back over and check, yep, Merriweather. Save that, if I go back and reload that page, it's probably just the body copy that's gonna change because I didn't get the, I didn't change the headers.

[00:01:43]
So you can see how long it was taking to load that type face because I still have that band width throttled but I can easily go and change that as well here.
>> Jason Pamental: So let me close that out, so we don't have to have the artificial throttling. But, so this is now rendering in Merriweather.

[00:02:28]
>> Jason Pamental: And it's using the same process. So, if we check under the network tab and look at the fonts that are loading. So you can hover over these things and it'll show you that it's coming from Google. So you can see that they're actually loading properly. So it's really easy to change that code, which you drop in from whatever service you're loading things from.

[00:02:55]
The rest of this stuff works in exactly the same manner. So obviously, there would be a few things that would be off. Like toggling the web fonts on and off. You can see it's not tuned for Merriweather. So I have to kind of go back and do that same little tweaking but it would be just a few values to shift.

[00:03:15]
You can see the H1 is actually relatively close. Little bit of horizontal spacing but it would be pretty close to occupying the same space. So this framework is actually pretty solid. You'd be able to copy and paste a lot of the same stuff into any other project and then just change out the source of the fonts that you want to load.