FREELessons: 18Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Deploying Variable Fonts

Hey, welcome back to up and running with variable fonts. So far we've gone through and gotten you across all of the most important things that you need to know about variable fonts before you start working with them. So now, we're ready to move into the practical phase and get coding. The first thing that you're gonna need to know is, how to actually load variable fonts into your website, to begin with. We're gonna be working with a couple of different font families as we go through and cover all the coding aspects of variable fonts, but to start with, we're gonna work with one that we've looked at a couple of times so far, and that is LibreFranklin. So to get the ball rolling, you're gonna need to download the files for LibreFranklin, which you can do, from the GitHub repository. You see that on the screen here and I'll include a link in the notes below this video, so you can download it by either cloning this repository if you're familiar with Git or you can just download the zip, which will bring down all the files from this repo, then you can extract the zip on your local drive. Once you extracted the zip, this is what you're gonna see and the actual font files themselves are inside this fonts folder. And these first two folders are the regular version of the font with all the different files for each of the variations. What you want, is inside this variable font folder. We have just got the italic version and the Roman version of the font. And you can just load these TTF files directly into your website but, it's better if you can route them into the WOFF2 format istead. I'll include a link to this page here, which tells you about the WOFF2 format. But, basically, what you really need to know is that it's a way of compressing fonts. So you're gonna get a small file size. And I've also noticed that with variable fonts, you seem to get a more consistent display across browsers if you're using WOFF2 format instead of TTF. So to convert your TTF files in to WOFF2, there's a couple of sites you can go to. One is Font Squirrel and you can just upload your font here and it will do the conversion for you. Or, you can head to Everything Font and this is an open source font so you can check that it's fine for you to make this conversion. Then you just want to pick your font file, make the conversion, it will give you a zip file, just download that somewhere on your drive and extract the file. For LibreFranklin, you're gonna need to do that for two files, for the italic and the Roman version. Once you've got your two zip files, you just wanna go ahead and extract them. And there we've got the two WOFF2 files that we're gonna be using. Now, to set up a folder to hold the code that we're gonna be putting together. I'm going to use this folder that I'm already in and for now I'm just going to delete the zip files. Create a new folder named fonts and I'm actually going to rename these fonts just so they're a bit easier to load in. That the names aren't so verbose. Now, I've just got LibreFranklin italics and LibreFranklin Romans and I'm just gonna drag and drop those into the fonts folder. And there, they're ready to use. And so, let's begin the coding process. I'm working with Visual Studio code here. You can use any code editor that you like. And I have opened up the folder that I'm holding my project in, here in the left side bar. All right, so now, I'm gonna create a new HTML file. We're gonna have a couple of different font families that we're using, so to help distinguish them, I'm just going to call this one librefranklin.html. Now, we're gonna add in some basic page code. If you're using Visual Studio Code, the Emmet extension is already installed. If you're using Atom or another editor, then it's definitely worth your time to install Emmet. That's E-M-M-E-T. Cuz then you can just put in an exclamation mark, hit Tab, and there's all of your basic code. We'll just change the title to LibreFranklin Variable. All right, now the way that you want to load in a variable font is by using an at font face declaration. So first, we're gonna set up a pair of style tags. And then in between them, we're gonna say @font-face. And now we're gonna declare the name that we want to give to our font family. So we're gonna say font-family, and we're gonna call it Libre Franklin. On the next, line we need to specify the source of the files that are gonna be loaded in. And so, we're gonna say, src. We'll set an URL, make sure you got your brackets there and then in between some single quote marks, we're gonna specify the path that we set up here. So, we've got fonts and then each one of our file names. I'm actually gonna copy the name of this while we're here, it's gonna go to rename and then just copy the whole file. Fonts, forward slash, Libre Franklin Romans, and we want the same code. I'm just gonna copy and paste and we also wanna load in our italics. And you'll notice here, that we're using the same font family name. And that's because we wanna be able to call in either the Roman or the italic version of this font by using the font family Libre Franklin. We don't wanna have to specify a different font family name every time we wanna italicize something, we wanna be able to just say, font-style italic. Now because these two names are identical, we need to provide a way for the system to know which of these two is the normal style version of the font and which is the italic style? So first, we'll specify that the font style of this font is italic. And now anywhere else that we use font style italic, where we have also said we want font family LibreFranklin, it's gonna call in this version of the font. This is where you can get tripped up because in some advice you'll see people letting you know that you need to specify font style italic. But if you specify a font style on one declaration of a same named font family, then it's also going to effect this font as well and it's actually going to make all of your text italic wherever you're using the LibreFranklin font style. So, you also need to go up here and specify that you want the font style associated with this file to be Normal. That's really important that you set the font style on both of these declarations in order for this to work. All right, now let's put in a little bit of basic styling. We'll just apply it to the whole page, so we use the HTML element. We'll set the font size to 2.5 rem, add in a line height. I always like 1.618, which is the golden ratio and now we can specify a font family that we just set up. And now we can say, font family Libre Franklin. So now any text in the entire site is going to be using the LibreFranklin font. So now, let's put in a little bit of dummy text, so we can see how this is looking. So, we'll just add a paragraph tag and we'll just add in Libre Franklin Variable Font. And I'm using the live server extension here, to give me a live refresh locally hosted server to preview this file on. So, I'm just gonna hit this go live button at the bottom here. And there we go, that's our Libre Franklin variable font. Where ee can inspect it and make sure that the font is coming through correctly. So there we go, there's our font family. And now to make sure it really is variable without getting into too much code that we actually need to cover in the next few lessons. I'm just gonna vary this slightly. Just gonna copy and paste in a little bit of code here. I'll explain how this works a little later. And there we go, that sent out our font beautifully. And then we need one more test and that is to make sure that we can italicize it properly. So now we're gonna say, Font Style, Italic. Very back and check again. And there we go, it's beautifully italicized. All right, so that is how you load variable fonts into a website ready for use. Now that we've got our fonts in, we need to start looking at how we can control their look, using CSS. So, we're gonna start by looking at the most fundamental concept when it comes to working with variable fonts in CSS. And that is the difference between high level and low level CSS properties. These are gonna be the two ways that you can control variable fonts. We're gonna go through what they are and how you'll be able to use them, in the next lesson. I'll see you there.

Back to the top