HTML and CSS Reference
In-Depth Information
Having the ability to embed any typeface on a website does not mean we legally have the
authority to do so. Typefaces are works of art, and posting them on our server may allow
others to easily steal them. The authority to use a typeface depends on the licensing we've
been warranted.
Fortunately, the value of using new typefaces online has been recognized, and companies
have begun developing ways to license and include new fonts on websites. Some of these
companies, like Typekit and Fontdeck, work off a subscription model for licensing fonts,
while others, like Google Fonts, license the fonts for free. Before uploading any fonts, let's
make sure we have permission to do so.
In Practice
To add a little character to our Styles Conference website, let's try using a Google Font on
our website.
1.
Let's head over to the Google Fonts website (
www.google.com/fonts
) and search
for the font we'd like to use: Lato. Once we've found it, let's proceed with adding
it to our collection and following the steps on their website to use the font.
When the time comes to choose which font weights we'd like to use, let's make
sure to select
300
and
400
, as we've already been using those within our CSS.
Let's also add
100
to the collection for another variation, too.
Google will give us an additional
<link>
element to include in the
<head>
ele-
ment of all of our pages. We'll place this new
<link>
element directly below our
existing
<link>
element. The new element will include the proper style sheet ref-
erence to Google, which will take care of including a new CSS file with the proper
@font-face
at-rule necessary for us to use the Lato font.
With the addition of the new
<link>
element, our
<head>
element will look
like this:
1.
<head>
2.
<meta charset="utf-8">
3.
<title>Styles Conference</title>
4.
<link rel="stylesheet" href="assets/stylesheets/main.css">
5.
<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Lato:100,300,400">
6.
</head>
Search WWH ::
Custom Search