WEBD 100 – Intro to CSS 4

April 2, 2024 12:13 pm Published by Leave your thoughts

Intro to CSS 4 Typography – Deploying google fonts

As we learned before when we discussed font families. A website relies on the user’s computer to have any given font installed on the user’s computer to be used on the webpage the user is viewing. If not, the typography will revert to the next font on the list and next and next until it will use a default font on the computer. In the past this was how it was. Only the common fonts were used on web pages. It was boring. However, with advancements in CSS3 it enabled most browsers to use custom fonts. We can now expand on our options for fonts by using web fonts. These are fonts that are stored on a server and are accessible to be used on web pages and applications.

Enter Google web fonts.

These are easy to deploy and will give your pages some added flair.

Remember when we broke down the structure of a blank HTML page? We learned that we used the <head> </head> tags to do things like deploy CSS into our HTML pages, add meta tags, descriptions and various other back end tasks. This is also where we will connect our page to Google’s web fonts. Let’s take a look at the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="description">

<title>Page Title</title>
<link href='http://fonts.googleapis.com/css?family=Average|Courgette' rel='stylesheet' type='text/css'>
</head>

On line 9 we have added in the external CSS file stored on Google’s server at the address: http://fonts.googleapis.com/css?family=Average|Courgette

NOTE: Remember that this Google font CSS file can be added in addition to any CSS file we create, this will allow the web page to use multiple CSS files at the same time. In practice you would end up having 2 CSS files each on its own line linking to external CSS files.

NOTE: You can actually go to and view the CSS files of all these Google fonts. It will be a page with plain text showing the CSS code:

/* latin-ext */
@font-face {
  font-family: 'Average';
  font-style: normal;
  font-weight: 400;
  src: local('Average Regular'), local('Average-Regular'), url(http://fonts.gstatic.com/s/average/v6/LzAkA6FGX-Ouke.woff2) format('woff2');
  unicode-range: U+0100-0247, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C77, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Average';
  font-style: normal;
  font-weight: 400;
  src: local('Average Regular'), local('Average-Regular'), url(http://fonts.gstatic.com/s/average/v6/cPZAGTYELVEPDPayvUwupTyostgioSAM1304.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Courgette';
  font-style: normal;
  font-weight: 400;
  src: local('Courgette Regular'), local('Courgette-Regular'), url(http://fonts.gstatic.com/s/courgette/v5/Ckr630-83X44XQUERDP306.woff2) format('woff2');
  unicode-range: U+0100-0247, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C77, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Courgette';
  font-style: normal;
  font-weight: 400;
  src: local('Courgette Regular'), local('Courgette-Regular'), url(http://fonts.gstatic.com/s/courgette/v5/B82100Tp02--OxqpDwxzp330jana920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

Now let’s deploy the font in our CSS:

h1 {
  font: 400 45px/0.5 'Courgette', Helvetica, sans-serif;
}

p {
  font: 400 14px/1.5 'Average', Times, serif;
}

With this, we can see that we have made our h1 text use the Courgette font as its preferred choice ahead of Helvetica and sans-serif. We have now successfully added a web font onto our web page/website.

Let’s look at some more!

https://fonts.google.com/ Here we can see we have an array of fonts we can play with, all free, and openly sourced / licensed for you to use and deploy on non-commercial & commercial projects.

This was always a problem with fonts. As developers it is good to use and learn about open source GNU licensed tools. Remember if it isn’t open source and you use it, you will have to pay a fee or a royalty to use said property.

Ok let’s look at Google’s fonts more.

We can see that there are a ton of fonts we can choose from. Each of these fonts has its own CSS file stored on Google’s servers that we can access and link to from within the <head> </head> tags of our webpages. We can simply browse through these fonts and click the + button to add them to a list of fonts we want to use.

Once we do so a panel will appear at the bottom of the page. This panel will contain the info we need to deploy the said font.

Here we can see the location of the CSS file on Google’s server:

Bungee

And how to deploy it in our CSS: font-family: 'Bungee', cursive;

Then we can simply attach the second code for the CSS to the font selector we want it on in our CSS file that we create and attach to our HTML. For example:

p {
  font-family: 'Bungee', cursive;
}

This would be making all paragraph text use the Bungee font. And that would be it! You have successfully learned how to deploy a Google font.

Let’s take a look at some additional things to keep in mind.

Font Size: This is a no brainer, we can change the size of fonts by simply specifying what size we need in CSS.

p {
  font-size: 12px;
}

Colour: Also very easy to change we just specify in the selector we need it in.

p {
  font-size: 12px;
  color: crimson;
}

Styles: We can also change styles, italic, underline, bold, and so on.

p {
  font-size: 12px;
  color: crimson;
  font-style: italic;
  text-decoration: underline;
}

Font Weight: We can add weight to the font to make it more and more bold as we need it to.

p {
  font-size: 12px;
  color: crimson;
  font-style: italic;
  font-weight: 600;
}

Font Spacing & Letter spacing: We can space out the letters or the words like this too.

p {
  letter-spacing: .300em;
}

or

p {
  word-spacing: .25em;
}

Now let’s take a look at the example file:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fonts!</title>
<!--In the line below, we import CSS from google server-->
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<!--In the line below we import our own CSS-->
<link href="stylez.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="text2">Some random text</div>
<div class="text3">Some more random text (from our friends at google)</div>
</body>
</html>

CSS:

@charset "UTF-8";
/* CSS Document */

/* Let's get the text below looking nice */
.text2 {
  color: crimson;
  font-size: 50px;
  font-style: italic;
  font-weight: 600;
  text-decoration: underline;
}

/* Let's add a google font to this text */
.text3 {
  font-family: 'Anton', sans-serif;
  color: mediumpurple;
  font-size: 20px;
}

Conclusion:

We simply throw some text in a div (you can just use <p> tags or any other kinds of tags) and assign it one of the classes we made in the CSS, then in the CSS we have the:

.text1 selector, we just want to space the letters out a bit and make it super huge at 70px.

.text2 selector, it is saying, make the colour of the font in here: crimson in colour, 50px big in size, italic, 600 font weighted and underlined.

Then on .text3 we want the Google font that we linked to in the <head> </head> to be used, make it medium purple with a font size of 20px.

Further Study:

To further expand on possibilities after playing around with what we went through so far in this lecture here’s a good resource to check out!

https://learn.shayhowe.com/html-css/working-with-typography/

Categorised in: , ,

This post was written by amax

Leave a Reply