The challenge of using custom typefaces in websites is no longer relevant, as we now have a plethora of subscription-based services such as Typekit and Fonts.com. As part of this exercise, we will focus on Google Fonts.
Enter the Google Fonts website, and choose the typefaces you wish to use as part of your microsite. The website features a shopping cart-like interface that allows you to view all the selected typeface and customize what variations should be imported into the microsite:
As the instructions suggest, we can simply copy the tag and paste into the
section in order to start using the typefaces. We can usefont-family
to specify the typefaces we just imported into the website:
https://drive.google.com/file/d/1HMdYKuw4L2gMb5FOt_ebWbdUPM9-IY13/view?usp=drive_link
(Updated October 29, 2023)
<!doctype html>
<html>
<head>
<title>Week 3</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="title">
Hello world
</div>
<div id="content">
<div id="content_left"></div>
<div id="content_right">
<div id="video"></div>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis velit laoreet, scelerisque purus eu, gravida nulla. Vestibulum ornare ornare urna a ullamcorper.</p>
<p>Cras dapibus interdum est nec semper. Maecenas tempor elit nisl, sed ultrices orci viverra eget. Vestibulum vel volutpat tortor, sit amet fringilla nibh.</p>
</div>
</div>
<div id="menu"></div>
</div>
</body>
</html>
/* SKIPPING CSS RESET */
#container
{
width:800px;
margin-left:auto;
margin-right:auto;
margin-top:30px;
margin-bottom:30px;
font-family: 'PT Serif', serif;
}
#title
{
padding:20px;
background-color:black;
color:white;
margin-bottom:20px;
font-size:32px;
font-weight:bold;
font-family: 'Roboto', sans-serif;
}
#content
{
display:flex;
align-items: start;
}
#content_left
{
width:280px;
height:500px;
background-color:#333;
margin-right:20px;
}
#content_right
{
width:500px;
}
#content_right h1
{
font-size:24px;
font-family: 'Roboto', sans-serif;
font-weight:bold;
margin-bottom:16px;
}
#content_right p
{
font-size:16px;
margin-bottom:16px;
}
#video
{
height:300px;
background-color:pink;
margin-bottom: 20px;
}
#menu
{
height:100px;
background-color:#333;
margin-top:20px;
}