ckportfolio.com - Custom Typefaces

Custom Typefaces

Using Google Fonts

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 use font-family to specify the typefaces we just imported into the website:

Screencast Recording

https://drive.google.com/file/d/1HMdYKuw4L2gMb5FOt_ebWbdUPM9-IY13/view?usp=drive_link

(Updated October 29, 2023)

Code Sample: HTML

<!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>

Code Sample: CSS

/* 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;
}
Fin