Hi there.
So far, we've already talked about the standard fonts, meaning the funds that already come installed
with an operating system.
In this lesson, we're going to talk about non-standard funds that don't come installed on an operating
system.
So these can be custommade fonts, funds that belong to a company, anything, basically.
Non-standard funds can be both free or you might have to pay for them.
In this lesson, we will show you two ways of connecting non-standard fonts.
Let's start with the first approach.
For example, there is a website with free fonts called Font Squirrelled Dot com, so let's give that
one to try right now.
On this website, you see there's a whole bunch of different fonts, you can download any of them so
that you can use it on your website.
And let's think about this for a second.
So if you can download a font, that means that basically a font is just a file.
Each file contains letters developed by a designer, and these designed fonts are then applied to the
text by the browser.
So when it comes to non-standard fonts, there are basically two types, those that are designed only
for a specific language and those that are supported by multiple languages.
That's why if your text is in a foreign language, it's important that you make sure you're using a
font that actually supports it.
Right.
So on this side of the page here in this sidebar, you can choose the category that you're interested
in.
Let's try, for example, calligraphic font's.
And I'm going to choose this one down here.
To download it, we're going to click on a tab that says Web font kit.
And as you can see, the site offers this font in different formats.
So you might be thinking so not only do I have to download the fonts, but now I have to bother with
the different formats.
Well, yeah, kind of.
But the good news is that is actually pretty simple.
And you're going to see why just in the second.
So the thing is different browsers support different font formats.
So that's why there's more than one for format, obviously, that's not very convenient, don't worry,
in practice, you only have to really remember two of them.
The Wolf formate and the 224th or OTF formate.
To be honest, they are pretty much the same.
In this table right here, you can see some of the most common formants and the bruises that they're
supported by.
So TDF, as you can see, is supported by Chrom from an earlier version and on also by Firefox Safari
Opera EDG, but only partly supported by Internet Explorer.
However, the war format is fully supported by Internet Explorer, starting with version nine.
And if you really need your font to be supported by a version of Internet Explorer other than nine,
you'll have to also include the EOT for it.
But to be honest, these Internet Explorer versions are pretty outdated anyway.
So please note that Tartuffe OTF, Waffen EOT, these are the abbreviations for the funds, and these
abbreviations are also used for the font file extensions.
But as for the actual full names of these formants, they're called going in the same order, true type
open type Wolf and embedded open type.
And this is going to come in handy.
So we will get back to it.
All right, so let's get back to our website.
So now we know we need to download two small files, one with the war format and another with the TDF
formate.
So we're going to check these two boxes here and we click download.
All right, done.
We got that.
We can open the folder, web fonts.
And here you see that we have two files.
We got TDF and we got Wolf, so they have the same name, but the extensions are different.
All right, so our next step is to connect the phone to the website.
To do that in Sears's, we're going to write the following first, you need the at symbol and then we're
going to write font face.
And be sure to write it with a hyphen.
And then we have the curly brackets.
You can put several properties in the curly brackets, but for now we're only interested in two of them,
font family and as our C source.
So the Ford family property specifies the fun name in the file, meaning what is going to be called
in your file, right?
What is going to be referred to as.
You can call it whatever you want, but I would strongly recommend to call it exactly what the font
is called because that's going to make it a lot easier to work with.
So it's less confusing.
All right, so then the Searcy property, it specifies the path to the font files.
So here we we're going to write you URL, then parentheses.
And without quotation marks, we're going to right the path to the font.
All right, so then we're going to write, formate and once again, parentheses, and this time in quotation
marks, either single or double.
It doesn't matter.
We're going to read the name of the formate, not the abbreviation of the formate.
The name of the form.
It's.
So you would want to write true type, for example, instead of TDF and open type instead of OTF and
so on.
All right, so then we're going to add a comma and connect another file the same way.
So let's connect the file we downloaded.
First of all, we need to place the downloaded phone files in our website folder, so typically you
would create a separate folder for fonts.
Usually it's simply called fonts.
So we're going to create that right now.
We open it.
And we drag the downloaded funds into it.
All right, so we've got that done.
And now we have to find files with the extension's TDF and Wolf, let's connect them to the access file.
To do that, we open our style access file and sublime text editor.
And here's where we arrive at Simbel.
Then funfest.
And then in the curly brackets, we raided two properties.
So the first property is fond family, and as I've said before, it's better to name to fund whatever
the original name is, so it's better not to make up a new name for it.
So here's the name of our fund and we just copy it.
And we write the name in quotation marks.
OK, so the second property is SIRC.
So first, let's connect to the war format for that, we're going to write your URL.
Then we're going to right the path to the final.
All right, so you need to understand that we're already in the success folder when we are right in
the path, right?
So if we want to get to this font file first, we need to get out of the scissors folded that we are
currently in.
That's why we add these two dots and the two dots mean that we're getting out of the Xerces folder to
a higher level, then we need to enter the fonts folder, which is in the same parent folder as the
case says folder.
So we're just going to write Fonds.
And then now that we are in the fonts folder, just the name of the file that we need to connect to.
So let's copy this name.
And we're done.
All right, so now after Espace and without any commas, we're right formate.
Then the parentheses.
And in quotation marks, we were right to form it, which is, Wolf, in our case.
And next, we're going to add a comma and connect another format.
So another format that we could use is TDF, this format should always be connected after all the other
ones.
So let's ride the path to the TDF file.
So now we need to write the format and 42, it's going to be true, type the name of TDF.
So you can see it again in this table right here.
Here at the end, we're going to add a semicolon.
If you want your fans to be supported by Internet Explorer of a version below nine right here before
the Wolf format, you need to write your URL, connect to the EOT it and in the format you write embedded
open type.
All right, so now let's actually go ahead and test our font, so for that in the HTML file, we're
going to have a heading.
Oh, we have a heading with the following text.
It says, have a nice day.
So for our H1, we're going to write the following.
We're going to have font size twenty four pixels and then we're going to write font family.
And here we go to add the name of the font that we wrote right here, right.
So let's see if it works, we open our file in the browser.
And as you can see, the font looks just like we wanted it to look all right.
So great.
Please note that this font face needs to go before any other code where it gets a refer to.
So if we refer to it down here, that means that it needs to come before this part.
And for that reason, it's better to always write the font face at the beginning of the page.
OK, great.
So now you know the first method for connecting to non-standard fonts.
So now let's look at the second way of connecting to non-standard fonts.
Fonts can also be connected using a third party website.
So one of the largest websites of this type is fonts that Google dot com.
And to connect the fund, we just go to the website and then we're just going to use the search field
to find the font we want, and we can just choose a font from the list on the page.
So let's choose this one, for example, and we need to click it.
And then click select this font.
Here at the bottom of the page, we see this line right here, so let's click on it.
And here we can see this link, everything right here.
So basically, if we copy this entry and we pasted in the head of our HTML page, we will connect to
the needed files onto Google fonts.
So this entry should be placed prior to connecting to our access file.
Otherwise, it's not going to work.
So let's just paste it right here.
And now, as the Google Fund website says, for age one selector, we're going to add the following
property lemonade, a cursive.
We refresh the page.
And now we can see that the fun looks exactly like we wanted it to look, so that works as well.
All right, so this method has its own advantages.
First of all, it's easier to connect to a third party font.
The second thing is that we don't need to worry about the browser support because the website already
insures the find support for you.
However, this method also has its disadvantages.
For example, if the website finds that Google dot com doesn't work or any other site, it contains
the funds that you are connecting to, then the font on your website is not going to work.
Also, when you use a third party website, your website needs to go to their website and then it gets
the information that it needs and then it downloads it.
All of this makes your website work slower.
So that's why it's better to use the first method where you download the phone file, but you can use
both methods as you see fit.
All right, that's it for this video.
And I'll see you in the next one.