Custom Fonts and CSS Techniques

So that you don't have to be copying and pasting in a lot of content, or typing it out, we're going to open up a new folder for this particular exercise, where we just put in the content for you. For the all this main stuff here we've added some content. Let's take a look at it in the browser so we can see it.

Down here we've got some paragraphs and some heading twos. We had added in the previous exercise an h1, but there's some subheadings here with h2s. We added this content here for you.

And also we've got a footer with a paragraph down below. Because what we want to do is style our text. We want to bring in some custom fonts.

Before we do that, one quick little thing though is this text is just really way too wide. And while the hero area is good to be the full width, we don't want this main area to be the full width. So I want to style this and I don't want it to get too wide.

So I'm going to target the main element here. So in my CSS, I don't have a rule already for the main. So I'm going to target that and I'm going to say I'm not going to use width.

I'm going to use max width. And the reason is just to review. The reason I don't put a hard-coded width of 850 pixels is that is not flexible.

If I put a hard-coded width in there, it is that size. And on smaller screens, that's a problem because it forces people to scroll. So I do not want a width.

I want a max width that says it can be up to that size, but it could be less. So on smaller screens, this will reflow and it goes up to 850 pixels. But for smaller screens, it can be less.

So that is the kind of width that we want to do in this case. Now I do want it to be that upper limit, but when it gets to hit that limit, I don't want all of the extra space outside, all the margin space, to all be on the right. I want it to be equal on the left and the right.

Now this margin amount that's there will be either very small or it could be a lot. I don't know. It's not a fixed pixel amount because it depends on how big my browser window is.

So because I don't know that and it's not a fixed amount, I'm going to say that those margins should be automatic. I don't actually have to spell out left and right margins, although those are the margins that are most important to be auto. If you say auto on the top and the bottom, effectively they will just be zero.

So I can use shorthand and just simply say margin auto and that will then center the section because it's putting all of the space equally automatically on the left and the right. That is how we center that area right there. Also when I do get to small screens, I don't like that it the edge.

I like that the hero does that, but this needs a little bit of padding inside of that space. Margin is outside, but the padding is inside. And so I'm going to set some padding and maybe just a little 20 pixels or so for those smaller screens.

Doesn't need to be a lot. Actually, maybe a little bit more, maybe 25. There we go.

Now I've got some space here on our smaller screens, so it doesn't touch the edge. And then it goes up to 850 pixels at its widest. And that looks much better there.

Okay, so now we have better looking text as we are styling our fonts. Our design calls for some custom fonts that are not normally available on people's computers. Now there are different services out there that you can use.

The most common one being Google Fonts. So fonts. Google.com is a place where you can get, they're up to 1800 font families. They're always adding more.

They started off with like, I don't know, 12 when they started out many, many, many years ago. So they're always adding more and more fonts here. When you're designing in an app like Figma, Figma automatically gives you Google Fonts that you can design with.

And then as a developer here, we can also integrate these for free at no extra cost into our website. So let's say a Designer has called for us to use a specific font. We can search for that.

Now, if we're just experimenting and we want to find a font on our own, we can type something over here and get a preview. So I'm going to copy curated coffee. I'm going to paste it in there.

And then I see a preview of curated coffee. If there's something that I'm specifically looking for, like I'm looking for something calm here, these are calm ones. Or maybe I'm looking for something fancy.

There's different categories that you can use here. There's some additional more ones that you can look for. And you can also do different appearances.

If you're looking for something that looks like markers. So there's different filters to filter down because there are 1800 of them. So many different ones, categories of typefaces, serif versus sans serif.

But you can also play with the size. If it's going to be a nice big heading where you can appreciate the text more, the subtleties of the font, or if you're going to do like a paragraph. If you were trying to find like a body text here, instead of a heading, you could put in a paragraph here.

And then you can go with something that's much more appropriate for a paragraph. Something that's more maybe like around 16 pixels or so. And you can actually choose some here from the menu.

I'm surprised they don't actually have 16 pixels in that menu, but maybe I can go with like 20. And I can see kind of what it looks like at a smaller size, like a paragraph would actually be. So once you have decided on a particular typeface, then what we want to do is we want to be able to load it into our page.

For text to be rendered, a font needs to be used. Either a font that's installed on that device. So iPhone, iPad, Android, Mac, PC, whatever device it is.

Or we can send it along and it can download the font behind the scenes. Much like we sent this image and the browser downloads the image, we can also do the same thing with fonts, which is what this service is really going to provide. So I want to search for a font called Medulla.

This is what our Designer has chosen for us. And so I'm going to go and look at Medulla. Now this one only has a singular weight, a singular style.

There's not multiple styles. Some fonts do have multiple styles. For example, if I go back and click on the logo here and get rid of the filter here.

So let's say we choose something that has different styles here. Let's do something. I'm going to do, actually, is there a filter for styles? Number of styles.

So you, if you're looking for a font that's good for like paragraphs and headings and you want different weights, different like italics and regulars and bolds and blacks and those sort of things, you can say how many different styles you have. And then you can pick from ones that have more styles. So for example, here, Poppins has a lot of styles that you can choose from.

And so we've got thin, thin italic, extra light, regular and italic. And as we go through, notice the numbers increase as the thickness increases. So 100 is very light and thin as we get all the way up to 900, which is the thickest.

And this has regular and italic. So that is one approach that fonts can take if they have multiple ones. There's also a variable fonts.

And with variable fonts, those have what are called axes and axes allow you to change certain things. So like if I look in the type tester here, there is an axis or a variable thing, right? So these allow us to change these and there's not some just preset amounts like non-variable fonts. Variable fonts let us customize this.

So they actually have this special programmability that we can say, I can do any weight between 100 and 900. Prior to variable fonts, we had preset weights where you only got, let's say a 400 and a 700. You couldn't do anywhere in between.

But with a variable font, if they let you change weight, you could do any thickness anywhere between 100 and 900. Like you could do 813 and that would be subtly thicker than something lower. There's also in this case, a width, which is kind of like a condensed.

So it is a condensed or is it not condensed? So how many different variables they give you like italic, regular? So in basically any weight, you can get a regular or italic and you can get a condensed or kind of normal or a partially condensed. If they give you variables, you can do more customization for those. But I'm going to go back to Medulla and this is the font that we want.

This only has one weight. It is not a variable font. So I can't change anything.

It's just a singular weight, which is called regular or 400 weight is the number. And I want to get this font. So I'm going to say, get this font.

And essentially, it adds it to my little bag up here. And I'm not ready to get all of this just yet. I'm going to go back and I want a couple of extra fonts.

I don't just want that one. So I am going to also search for Rancho. Rancho is another font that I want.

It too, only has just one regular weight. So I want to get that font as well. And finally, I'm going to go back and click on fonts, either in the logo or click on fonts over here.

And I want one last font and that is Able. Again, this particular font only has one weight, one style. So none of these have italics and none of them have different weights.

So I'm going to hit get font. Now I'm going to take a look at my bag here. If I had browsed and was still looking, anytime I want to get back to my bag, I could just click my bag up here and it shows me the fonts that I have in my selected bag.

If I don't want any of these fonts anymore, I can delete it. And the idea here is that we're going to get code that is going to behind the scenes, download all these fonts. If you're not going to use a font, you don't want people to download it because that just wastes data on their data plan.

And so if they're on a limited data plan, it'll just literally just waste their data because you download a font that they never use and they don't even know you're wasting their data. So that's not nice. But also it takes longer to download your page.

Even if you're not using the font, it still downloads it. If you're not using a font, don't have it listed here, make sure you delete it. But let's say I want to use all three of these fonts.

I do not need to download them. I'm just going to get the code to embed them into our page and those fonts will be loaded from Google's servers. So I click get embed code.

And here I get the code and it tells me what to do. I am going to use a link, kind of like we linked to a CSS file. I'm going to use this link code right here.

So I'm going to click copy to copy that code. And I'm going to come back to my page, come back to my HTML. And just like I link out to my CSS file, I'm going to put these links above my CSS file because I want these to start downloading this font as soon as possible.

The idea of these links is that this is right here, this particular link. I'll come back to these other links in just a second. This particular link here is actually to a CSS file that's hosted on the Google website, this fonts.googleapis.com. And this is a CSS file that will load those fonts behind the scenes.

And it's going to actually start downloading the fonts when it hits this. And so I want that to start downloading the fonts because the fonts are a little bit bigger. It's going to take a little bit of time to download them.

So I don't need to download my CSS file prior to starting the download of the fonts. I want to kick those off as soon as possible. Now let's take a look at this CSS file that they generate for us and see what exactly this does.

And I'm going to zoom in on this so you can see it. So they define a font face, a typeface. They say this font family will be called Able.

This one will be Medulla1. Now notice that they put single quotes around these. They don't need single quotes around these if there's not a space.

So with Able, they don't technically need those single quotes. Now Medulla1, they do have a space in that name. So then the single quotes are required.

They just automatically put those single quotes around every font name. They don't do some sort of detection of does it have a space or not. But technically when we're using it, this is the font family name that we have to use.

Just know that you don't need to have those quotes unless there's a space in the name. It also says it's a normal as opposed to an italic. It says the weight of this, which in this case, this is like a normal weight.

And we're going to talk about font display in just a little bit. And it says where the source file is. So this is the source file.

Right now, this is a WAFF 2 web open font format version 2. There are different versions of fonts and how they are formatted for different browsers. So this does browser detection to say, oh, your particular browser, they can use the latest WAFF 2. But if you were using an older browser, this CSS file might be generated differently. They actually detect what browser you're using on the server.

They then generate the appropriate thing, giving you the correct format behind the scenes. So you're only downloading the most optimal font format that your browser needs. So this defines the three typefaces and says where those fonts are located.

So it'll actually download those fonts from the gstatic.com. So this is googlestatic.com. This is one of Google's domain names. They just use these for behind the scenes stuff. I know you just go to Google.com, but these are all from Google provided by them.

Now, let's remember that gstatic.com here. This up here, these pre-connects, pre-connects, they are before the connection. So this is the actual connection to go get those fonts.

The pre-connects simply say, hey, let's warm up the thing. Like, you know, if you don't start up your car in the winter before you start driving, it's always cold, right? So you might want to remote start your car to get it warmed up. So that as soon as you're ready to go, it's ready to go.

It's warm and drives right off, you know, the oil is warmed up and stuff. So that's kind of what these pre-connects do, is they kind of pre-start your car for you. And they say, we're going to want to connect to the Google APIs website down here.

We're going to want to connect to that gstatic.com. And by saying to the server, hey, I'm going to want to connect to those. It kind of gets that on the phone, if you will. So think about making a phone call.

If you're going to make a phone call, you got to, let's say your CEO, you know, your CEO has hardly any time and he doesn't want to wait for the phone to be ringing, for the person to come on to the phone call. So he might have somebody else say, you go start the phone call when they're on the line, you come and get me at that moment. So this kind of makes the phone call, gets the person on the line and says, okay, that connection is ready.

It's open. I've said, hey server, I'm going to connect to you. The server says, okay, I'm here.

Let's open up a connection so we can talk. So that the moment it needs to actually go to this file, then start downloading those fonts, that connection, that phone line, if you will, is already open. So that connection to the server, which takes a little time to say, hey server, are you there? Yes, I'm here.

Let's handshake. Let's time so that pre-connect can help to make things just a little bit faster. If you didn't have those pre-connects, everything would still work.

The only thing you absolutely need is this link right here, but the pre-connects just help to speed things up just a little bit. So since Google provides them, we may as well keep them in there, but this is really the heart of what is actually loading the fonts. Now on your computer, you have many fonts, but that doesn't mean that your document is using all of those until you go in and choose what in your document gets those fonts.

So all this did was load the fonts behind the scenes. If I preview this page, nothing in the page is going to visibly change because I didn't say anything should use those fonts just yet. The only thing that technically changed was it does take a little longer to load this page because it's downloading those fonts behind the scenes.

But now that it is loading those fonts, I now have the ability to use them. So I don't need this open. I'm going to close that and I don't need this old version open.

And I'm going to go back to the Google Fonts webpage here. So I did the first part. The second part is I need to call the font family, and I'm going to zoom in on this so you can see this a little bit better.

I don't like how they recommend using a class. You don't need to make a class. All you really care about here is the font family here, and this is giving you the name.

They define the name in their CSS, so you need to use that name given that whatever name they're giving you here. And so I'm going to just grab this part of it. I'm not going to copy all of the code because I don't need all of this.

I just need this part right here. And so as far as the first font that I want to use, let's say I want everything in this page to be Able. So I'm going to scroll down here to Able, and I'm going to say let's copy this.

I'm going to copy just that font family part. And I'm going to go to my CSS, and I'm going to say everything in the body isn't this generic sans serif. I'm going to say it's all Able.

And whether these are single quotes or double quotes doesn't really matter, but actually just to show you, even if you don't have quotes, this is just a single word and you don't technically need quotes. You can have them or not have them. Either way, it doesn't matter.

I'm going to save that and come back and take note of the font here. And then when I hit refresh, now it's a different font. So all of the text here in this entire page is now using that Able font.

All right, so now we just globally change the font for everything, and it worked because I've loaded it in. So it's always a two-step thing. First, you must load the font, and then you must tell it to use it.

Now if you only do this part, you're saying my first choice is Able. But if Able is not available, then it'll be some kind of sans serif. If you do not load the font, then this won't work, and it'll just default to the sans serif.

And if for some reason it fails to load that font, at least we know it'll be some sort of sans serif typeface for this. So that might be nice for the overall default here. And looking here, this is a little bit smaller than the other font.

It's a little more condensed. So I might need to make my paragraphs a little bit bigger here, or really all my text actually. So let me go back and go back to my body here and just say the font size in general.

Instead of the default 16 pixels, we're going to set a default of 19 pixels. And that'll be for everything. I don't have to go to the paragraph and the list item and all sorts of things.

I could just say as a default, let's just do 19. And that's a little bit better for this particular font, which kind of runs on the smaller, more condensed side of things. Okay, now this heading one, I want to make that look different.

So I want that one to be the Medulla one. So I'm going to come back up here to Medulla one, and I'm going to copy this for the Medulla one. And in my CSS here, I can go to my heading one and then say this is Medulla one.

Now here, because there's a space, I do need those single or double quotes. As far as a fallback goes, system UI, this would be a different user interface font depending on your operating system. So are you on a Mac or Windows or Android or iPhone? And I don't want it looking like the standard system fonts that would be different across all platforms.

I don't like that inconsistency. So I think a good fallback would just be a standard sans serif. I'm not that thrilled with the fallback fonts that Google fonts gives you.

So I'm fine with using the fonts, but always look at the fallback fonts. They're not always appropriate. Don't just trust Google fonts blindly on that case.

If it's not Medulla one, it'll be a sans serif. Also, I could say as a pecking order here, if it's not Medulla one, then fall back to Able. If for some reason Medulla one doesn't download, but maybe Able did, or then if it doesn't have either of those, be a sans serif.

See that, that first choice, second choice, third choice, that's up to you. Google is just recommending something. The main thing is that you're using the name that they gave you for your first font name of your first font choice.

And as long as that's available, that will be used. The only reason it wouldn't be available or reasons would be, for example, if you're on a slow connection and it times out or errors out, maybe your phone lost internet and your page was partially loaded, but it never finished loading the fonts. It could also be that some companies might block Google fonts or some countries might block that.

I believe China does block Google fonts, but for the most part, most people will be able to access these fonts. I'm going to save that and hit reload. And it is different, but it looks pretty similar.

Let me just go into the inspect here and let's just turn this off. So this is, if I'm not overriding it on the heading one, it goes back to the page default, the one that I specified on the body. Cause remember I set the body font to be able down here.

If I don't do this, which is the Medulla one, I'll use able and it's kind of small. It's kind of condensed. And now that I see it, not a big fan of it.

It's not different enough. So I think I want something much more different. And our other font is much more different.

This Rancho font is definitely distinctively different. So I think I want to switch to that instead. We're going to try that instead.

And there are not any good cursive fallback fonts. So again, I would not leave cursive be a fallback font. If it's not Rancho, you know, go to some sort of Sans Serif or again, Able or Sans Serif might be a nice fallback.

So I'm going to save that and hit refresh. And that is distinctly different. It's more friendly, especially for the intro.

I like the simplicity of this for regular texts, but I like the kind of uniqueness for this nice large heading that's here. Okay. So that's much better.

Now we have identified here that we're not really using this Medulla one. So, um, right. Yes.

The Medulla one don't really like the Medulla one. I don't want to use it. Now, if we look at our code, this URL right here, notice it says, let's import the families of Able and the family of Medulla one and the family of Rancho.

So it's actually in this address where it's telling Google which fonts you want. I don't want the Medulla one. I have two choices for fixing this.

One is I could just go back to the Google website and edit my cart and say, I don't want Medulla one. Let me delete that just Rancho enable. And I could get the embed code and they would fix that link.

So I could just grab that link, but let's say you don't have the cart here on your computer and you don't feel like adding them all back in just to get the code. Um, it's family equals this and family equals that and family equals that you could just delete the part that you don't want. So I could just say this and family Medulla one, I could just delete that.

And now it's still and family Rancho. So it has family equals Able and family equals Rancho. And so now just to prove it, if I copy this and paste it now, it's only loading Able and it's only loading Rancho.

So either way, whichever is easier for you, you could do it either way. Uh, you could just edit it right here in the code, but it is important to not load those fonts because that will slow down the loading of your webpage. And if you're not using a font, don't load a font that you don't need.

All right. Um, but this is also why you want to leave Google fonts open while you're initially working, just in case you do need to go back and edit that. Uh, you can go back to your little bag of fonts there.

Okay. Um, now this heading here is, is the correct font that that is good. Uh, that is the Rancho font.

But if we go look at that Rancho fonts here and I'm going to copy the text for curated coffee to do a preview here. So I'm going to do a little type tester here and, uh, I'm going to test this out and make this a little bit bigger here. So looking at this, look at the coffee that's there.

And, and then look at this here, like, look at how these two Fs are being merged together. And here there's, there's some distinct space between them. So it's like, when you look at here, you look at these characters, like see how that a right there is closed up and here it's not closed up.

So it's, it's like there's an artificial thickness, thickness is being added here. Like a fake bolding. Hmm.

Let's think about headings. Headings are bold by default. This particular font family does not have a bold.

Hmm. So even though I did not say that the heading should be bold, I didn't have to because it was a default and it's faking the bolding, which does not match the original font. I want to remove that.

So I need to change the font weight because the default font weight is, um, the font weight bolt. Uh, now font weight 400 is the normal weight. That is the weight that we have for this, by the way.

Um, remember that there's only available in a regular 400. So that's why I'm choosing the weight of 400 and look at how now this is the correct font. That is how it's supposed to be intended.

So be careful of headings of any level, H1, H2, et cetera. Um, artificially faking the bold if you don't have an actual bold font. We want to override the default font weight bold and set font weight 400.

So of course I'm going to go back to my CSS and set that there as well. All right. And save both of those pages.

And that is the correct thing, the way we want it to be. Excellent. Um, anything else we want to do is just some kind of additional type styling.

Uh, for example, here in the hero area, you know, we've got this heading and then we've got the paragraph down below. We want to style that. We want to make that all caps just so it kind of forms like a nice kind of bar to it.

Uh, and I don't have a style for that heading, uh, the hero paragraph. So I can come here. I've got my hero style, but I don't have my hero paragraph.

So this would just be paragraphs in the hero area. And I want that to be text transform, uh, uppercase makes them all caps. So there we go.

And as far as spacing, uh, this has a lot of space above and below it. Notice this heading one here has margin top and bottom. Uh, we can customize how much that has and also the paragraph down below here.

So maybe we don't want any extra here on this paragraph. We could say margin zero to get rid of that. So that doesn't have any space and we could just have it on the heading.

So maybe we don't want any on the top of the heading because the hero has its own padding, right? This green padding here. And we want that text to be right in the middle of that. So I didn't want any on the bottom of the paragraph.

I don't want any on the top of heading one. So I can go in and say my heading one has a margin top of zero. Now it's just the padding that's kind of offering the space.

And then I want to customize how much space is between these two elements. Uh, the paragraph has nothing just bottom margin on the heading one, and I can reduce that. I can make it less.

I could say margin bottom, maybe just 10 pixels, a lot less than it has right now to get those closer to each other. Now, as I've done all of this, this height takes up less space because all of the extra space of the margin is removed, but that's good. It was actually a little bit too big before.

And now this is looking pretty good. Although when I'm looking at it on one line here, it's not looking too bad. But when I look at it on multiple lines, there's way too much space between those.

Also, another thing is that when I inspect this, you might notice all of that blue space there, the blue height, that is actually your line height. Text is vertically centered within your line height. If I reduce the line height, this blue space that we're seeing here will actually get shorter.

And also when they're on two lines, the space between the lines will also get less because the height of the lines is less. So I'm going to go to my heading here and go to line height, and we're going to reduce this down. It actually needs to be quite a bit less.

Most of the time, you don't end up getting smaller than your font size, but this particular font, it looks nice with a lot less. So that looks much better. So I like how much space is between those lines now.

And then also when I come back here, also notice the height of this line is less. Just to be clear here. If I change the line, I'd see how there was more space here.

Look at how much space is in the blue around the type. And then if I turn this back on, notice it gets shorter and notice how much less space there is inside the blue around that type. Okay.

So in the exercise, you'll do a couple of other additional stylings here just for additional practice, setting things like your margins and your padding and your borders. But we've done all of that stuff before. So I'm not going to demonstrate that here in this video.

The main focus here was on the fonts and styling of that. But actually, before you do your exercise, there is one last setting that I forgot to explain that I want to do before you try this out yourself. And that is the display swap.

Now you could just let this be the default display swap, but you might wonder, what is that display swap? We saw that also when we loaded up the CSS file and I said I would come back to that. So what is that display swap thing? What is that all about? So let's say we just Google font display here. I think, yeah, CSS tricks has a great article.

This is a great website, by the way, CSS tricks. They have lots of great reference articles and stuff. And so here, what font display is all about is how browsers load their fonts.

In particular, what happens during the loading process? So how's it going to display the stuff? So auto is the default. Now we're using swap. And let me talk about the difference.

So auto, which is the default, if you didn't set anything, that's what it would normally default to. This allows every different browser to use their own default setting, which means it could be different. Now they're saying that most of the time it's similar to the block value, but auto just means every browser gets to decide based on what they want to do.

So Apple gets to decide for Safari, Google and Microsoft decide for Chrome and Microsoft Edge and Mozilla does for Firefox and so on. Now block, block says, let's tell the browser to briefly hide the text. So while that font is loading, what is it going to do with the text? Because is it going to render it in the wrong font? Like the fallback font? Because it can't render it in the final font because the font hasn't downloaded yet.

It takes a little time. So this could tell the browser to briefly hide the text so you can't even see it until the font has fully downloaded. More accurately, specifically, the browser draws the text with an invisible placeholder.

So it's kind of reserving the space. You just can't see it. And then it swaps in the custom font as soon as it loads.

Now this means this does something that's called the flash of invisible text, meaning you see this whole area where you don't see anything. And all of a sudden, boom, the text appears like it reserved the right amount of space, but you didn't see the text until it loaded. And then boom, you see it in the correct font.

Some browsers like this, like Apple likes this. This is the default of Apple's Safari browser because the alternative is they could show it in the wrong font and then it changes to the correct font. But then you see this kind of flash of unstyled text.

So swap, which is what Google fonts defaults to, they do it very differently. They say, hey, the browser should use the fallback font first while the text, while the font is loading. And so they're going to see it in kind of the wrong or unstyled text.

And so they'll see all the text. It'll be in the wrong font, the fallback font. And then once the font is loaded, then it'll switch over and then you'll see it in the final font.

Now, the benefit of that is you get to start reading sooner, but it doesn't look quite as nice because you see it in the wrong font. And then all of a sudden, boom, you see it in the correct font. It really is personal preference.

I can understand arguments in both directions. I think the invisible text and then it just loading in the correct font looks nicer. I don't like the look of the fallback font, then switching to the final font.

That is a personal preference. I completely understand the argument of I'd rather get the text faster. I think that's why Google says let's do swap because people can access the text right away, even though it switches over, they are more focused on the accessibility than the appearance.

It is really personal preference, but that's why I pointed out Google has made that choice for you. If you don't want them to make that choice, then you can change it. You don't have to use swap.

You could let it up to different browsers. For example, Chrome could default to swap and Safari could default to block. And so if you don't want to make that decision for everyone, if you want to allow the browsers to make their choice, we could go back and say, no, display could be auto and then just let it up to the different browsers.

Or if you like the block, you could also use the block as well. If you want to force that on everyone, that is up to you. It is a personal preference about how it loads.

If you don't have a preference, then you could just let it be swap, just the default. But that is a personal preference that you have to make and we get to make it through that. All right.

Now it's time for you to do exercise 5B, where you can put into practice loading custom fonts into this webpage.