Woo hoo!
I'm super, super excited.
Man, I love this form example.
It's just fun, you know.
I know there's many different ways you can create forms and I hope you learn something new through this
example.
So let's get into it.
As you recall, this is what our form looks like.
We've wrapped it in a postcard image, and then we've got our own custom fonts, right?
We've got our headings.
Very, very cool.
So the first step is before we even start coding our HTML and CSS, is we need to organize our assets.
And what I mean by this, is that we need a few things before we can start coding.
Can you guess what they are?
Well, that's right.
We need our postcard image itself. And I'm just going to have a PNG image for that.
And then we've got our own custom fonts, we've got fonts for the heading and we've actually got a different
type of font when it comes to the user typing their input.
The postcard image is pretty straightforward, right?
All we need is a PNG image and we're done. Fonts however, are a little bit more complex when it comes
to coding.
So let me just spend a little bit of time and explain to you how fonts work when it comes to front end
dev.
Firstly, we know that the fonts apply to your HTML can be controlled using the font-family property
and this property takes one or more font-family names and the browser travels down the list until it
finds a font that it has available on the system it is running on.
For example, let's define font-family for a paragraph element.
You've seen this before, right?
Pretty straightforward.
And this system works well.
But traditionally, font choices were very limited and added a lot of overhead.
Why did it add a lot of overhead?
Well, because there are only a handful of fonts that you can guarantee will be available across all
common systems.
These fonts are known as web safe fonts.
So what you can do as a developer is you can use the font stack to specify preferable fonts followed
by web safe alternatives, followed by the default system font.
But this adds overhead in terms of testing, to make sure that your design looks okay with each font,
etc
etc.
So, what was introduced?
... 🥁 drumroll 🥁 ... web fonts.
Web fonts work really well, and they allow your browser to download fonts.
And it works really well because it dates right back to Internet Explorer version 6, waaaaay back in
time.
So it's super, super exciting.
And because it allows your browser to download fonts, it means that any browser that supports web fonts
can have exactly the same fonts you specify available to it.
It's amazing.
But in order to use it, we have to abide by certain syntax rules.
In particular, we have to have the word @font-face.
What does it look like?
Well, let me show you.
Let's now define an @font-face rule, right,
or a block of code.
And all we have to do is define the name of the font-family.
The name of the font-family is a custom name.
That's a name that you and I can give it.
And then that src attribute is really important because the src attribute tells the browser where
to fetch that font from.
You can define an actual live URL or you can point to somewhere on your own PC or server.
And what this means is that when you are defining styles later on in your CSS, for example, an h1
tag, all we need to do is target that font-family that we defined, in our case aRandomCoolFont.
If that's not found, the same rules apply.
The browser is going to work its way down the list.
In our case it's going to use sans-serif if that for some reason has not downloaded to the browser.
Pretty cool, right?
But ... and I always hate that word
hey, BUT.
But it does get a bit more complex than this.
And there are two very important things to bear in mind about web fonts.
#1, browsers support different font formats, and this means that typically you'll need multiple font
formats for decent cross browser support.
For example, most modern browsers support "woff" and "woff2", which just stands for web open font format
versions one and two, and those are the most efficient formats around.
But older versions of Internet Explorer only supported EOT, which is embedded opentype fonts, and
you might even need to include an SVG version of the font to support older versions of iPhone and Android
browsers.
So that's the first thing I want you to keep in mind.
#2, the second thing I want you to keep in mind is that fonts generally are not free to use.
You have to pay for them, and/or follow other license conditions, such as crediting the font creator
in the code or on your site.
But luckily for us, some fonts are free and the ones I'm giving you are free.
How did I get them?
I went to fontsquirrel's webfont generator website.
I then downloaded their file which was a ttf file.
I then unzipped it and within that file I got the woff and the woff2 files.
That's all I did. Very, very easy and I'm including it in my project directory.
So I'm accessing these fonts directly rather than specifying a URL that the user has to travel over
the net to get.
I know, I know it's a lot to take in, but
I hope you're learning something new.
And before we get into coding our form, there's something else I just want to discuss, and that is
how grids work, because I'm going to set up this postcard as a grid.
See you in the next lecture.