Welcome back, everyone, to this lecture, we're going to discuss just the basics of fonts, everything
we've seen so far is in this kind of times, new Roman style font.
But you can actually affect the font family, font size, font style, font weight, text alignments,
et cetera, all within CSS.
We're also going to show you how you can actually link fonts from outside your website using a clean
link inside the HTML.
Let's get started with the basics by heading over to our code editor.
All right, here I am back inside our Visual Studio code editor.
What I'm going to do is inside the body.
I'm going to create a div with a class.
And we're just going to call this maybe stuff.
And inside this, Dave, I'm going to create some paragraphs here sources and say text and create another
paragraph here called more text.
OK, so I have this class, and let's also creates maybe a heading one outside of that div that says
welcome.
So I have welcome and then a class div here with text and more text.
Let's imagine I actually want to change the fonts here.
To do that, I have to address the font family so I can come back to master CSS.
And then if I only wanted to change the font for welcome, I can say one.
And then I call the property Font Dash.
And you notice there's going to be a lot of different properties for fonts.
But the one we're looking at is font family.
And this is going to give us a list of fonts that are available to us.
Later on, we're actually going to show you how to get fonts from the internet.
We're going to say font family right now.
And you can see there's a bunch of just built-in fonts that are available to us.
Keep in mind, not every font is available on both Windows and Macs.
There are some funds that are only available on Macs, but we should be OK with the list shown here.
Now, let's go ahead and choose one of these, let's say, to humor.
There we go.
And now I can see the change has occurred, but only to each one.
So to comment this out, you can do control forward slash that we can see the effect come on and off.
OK, let's imagine I wanted everything on the page to have to humor.
Well, probably the smartest way to do that is to just say body here.
And then that would affect the font family for everything.
Now let's imagine I want welcome to have a specific text alignment.
Well, luckily for us, there's lots of text properties within CSS to grab those.
Once you've selected the elements, classes or ideas, you want to apply them to, you simply say Text
Dash, and then you can see there are a bunch of different text properties that we can style.
The one you're probably going to end up using a lot is text align, which then allows us to center the
text left, right, justify, etc. So let's go and choose center.
And you can see here that has now center the text.
And what's really nice about this is regardless of how big the actual browser window is, you notice
welcome is always going to be centered, which is nice because that means it's going to work regardless.
If someone's looking at this on their phone or on a desktop or on a laptop, etc. So it's nice for different
screen sizes that it's always going to stay centered there.
And there's a bunch of text properties you can check out for that sort of thing.
So we saw there's a bunch of font properties as well.
One of them is font size if I want to edit font size.
There's two main ways of doing it.
One is through absolute units and the other is through relative units.
Let me go ahead and bring up the Mozilla font size documentation.
So if you come to the documentation for font size.
Inside and then Webb Dock, so font size is the property worth taking a look at?
And we can see here there's examples, so there's many different ways of actually changing the font
size.
There's basic just phrases like extra small, smaller, large, etc. that are sometimes useful to just
say, OK, I want this to appear relatively small on the page.
There's absolute units like pixel sizes or inches or things of that nature, like centimeters, millimeters.
There's also percent signs that you can use as well.
And as I mentioned, as you scroll down here, you can see the different syntax for setting up your
KSAZ font sizes.
But you're also going to see that there's a general description of font sizes being in terms of absolute
units versus relative units.
So the absolute units are things like in terms of pixels.
So we scroll back up here actually passed over.
So pixels or inches, those are going to be things that are absolute.
These are really useful when you need actual accuracy and to make sure something is, let's say, two
inches to the left or two inches from the top and bottom of the font, etc. because you intend for this
page to be printed out.
But you can also do is use EMS or EMS stands for an ephemeral, although that's really just a link to
kind of an old printing press term.
And essentially, this is going to allow you to do a ratio of the base font size on a page.
So let's actually show you this.
I'm going to try to set a font size of pixels, then how to set a font size with them and then how to
use a combination of, let's say, something like eight percent an m.
So let me close these off.
And what we're going to do here is each one I'm actually going to, let's say, change the font size
in pixels.
So maybe I want it to be larger or smaller.
I can say font that size colon.
And then set it in pixels by saying a number like 40 and then saying pixels, if I wanted to be much
larger, I could say something like 400.
And you can see now it's absolutely ginormous fact that you can just see the W.
It's so large, but you get the idea.
Or for some reason, I want to make it much smaller, even though it's still heading one.
You can see you can immediately kind of overwrite any default font sizes here, so I can just set it
to forty there, then I can do things for kind of other pieces.
So maybe if I want all paragraphs to be a particular size, I can say font.
Size here, and maybe I make that larger or something smaller, et cetera, so I can see font size 20
pixels.
Now the other thing I can do with a font size with M or M really stands for ephemeral an order or an
do.
Here is I'm going to delete each one and paragraph two so we can focus here.
And in fact, let's just show this with just.
The paragraphs there, OK, so I have these paragraphs and you'll notice by default, there's some sort
of default text size that the browser decides on, and the default text size for most browsers is actually
16 pixels and the M that is a m that's going to actually stand for the current font size.
So typically then that means one m is the current font size on the page.
So that means I can kind of ratio things out based off this.
And if I know the typical current font size is 16 pixels, then there's kind of a formula here in which
I can say pixels divided by 16 is equal to one kind of relative unit of M.
Again, this is going to be relative to the default browser text size.
If you have some sort of really tiny screen, the default browser text size is probably not going to
be 16 pixels, so we should expect this to be OK for a variety of screens.
If I begin defining things based off kind of the default browser text size, let's actually see this
occur in the paragraph.
So I'm going to see paragraph.
Font size.
And then I'm going to set this equal to, let's say, something like three.
EM and notice now it's much larger, so we can say now that it's going to be em.
That is three times 16 pixels.
Now you can also use a combination of percents and M in order to kind of set the body font size to,
let's say, like one hundred percent of the default size.
So I can say body say.
Font size.
Colon.
100 percent here and then I can start rationing things based on the fact this is like font size 100
percent.
So this kind of linking this to OK, default is going to be the 100 percent of the default, which is
16 pixels usually.
So that means if I were to make the smaller like 10 percent, suddenly everything else would scale is
now three times the default, but the default has been changed for the body to 10 percent of the default.
So you can see how rate showing this with the percent sign allows me to quickly affect everything on
the page.
Now, don't worry too much about font sizes in general, right?
Typically going to be dealing with this level of detail, and this is more of stylistic and design choices
where you would just kind of go Google around things and say, Well, I want it to be this particular
font size.
The one thing to note here is you have the absolute length units and well as the relative length units,
and so you can use percent sign to set things based off the default browser.
Text size Now to finish off this lecture, I did mention that we show you how to download fonts from
the internet or link to them.
The easiest way to do this is by using a Google Fonts and their API.
So if you Google search Google Fonts, there's actually a website called Fonts that Google.com.
And these are all free fonts to use.
You should check the license just in case there's, for some reason, something uploaded here that isn't
free, but they're pretty much all free for the most part.
Again, you can check the licenses.
Let's go ahead and choose one that is really obvious that it's a different font.
So no, scroll down here until I get one that's really unique.
OK, so clearly, Molalla, that one is going to be really obvious if we're able to connect to it.
So there's two options here.
One is to actually download the family, which is going to download the files and that CSC.
The easier way, however, is to actually use the Google API for this.
So if you go to developers like Google.com forward slash fonts, there's documentation here on getting
started.
And what you do is you actually set up another link to a style sheet.
You're essentially connecting this to an online CSS style sheet where you replace the family with the
font name.
So what we're going to do is we are going to copy this code sample.
And then I'm going to come to my HTML.
And we'll notice I can actually link to multiple style sheets and there is an order on how these are
loaded.
So I'm going to load that font first.
So going to copy and paste this right here, this style sheet.
So again, notice I'm adding in another link in the same way we have a link to our own CSV file.
The one thing, though, is I have to figure out the family name for the font.
And that family name is actually up here in the early formula law, so it's actually just move.
Plus law plus law.
So I'm going to copy that and then I'm going to replace font plus name as mu plus law plus law.
Obviously, your names are going to change depending on what you decide.
So I have now connected this to the Family Moola law.
Now that means I should actually be able to reference Moola Law in the next CIUSSS file, since it's
already been loaded.
By the time I'm loading the master that CSV file, so it's loading up and linking to this CSV file,
which essentially loads up that font family.
And then I can now refer to it as a font family within master that CSS, you should note for the sake
of the API, the spaces are filled in with pluses.
We won't actually need to fill those in a pluses when we refer to the family insider access.
It's going to come back to master that's, he says.
And now, instead of to Homa, what I'm going to do is in quotes, I'm going to pass in whatever the
name of the font family is.
And that's going to match up with whatever is shown here.
So it's just Malala.
You can go ahead and copy that.
And then come back here and place that in.
And now I see I'm using Malala on my Web page.
The one caveat is this does add a tiny bit of loading time to your website because of the fact that
it needs to load up and connect to this API here.
However, that loading times should be minuscule compared to other things happening on your page.
So it's really not a big deal to connect to the fonts Google APIs, especially for how easy it makes
the use of new fonts.
So again, you just go to the font store google.com, figure out a font you like, figure out the actual
family.
It should essentially just be the name with pluses instead of the spaces there.
Connect that load that up in your style sheet, and then you can come here and actually refer to the
family to any sections of text you want.
OK.
Thanks.
And I'll see you at the next lecture.