CSS Fonts (Google Fonts)
Google Fonts
If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
Google Fonts are free to use, and have more than 1000 fonts to choose from.
How To Use Google Fonts
Just add a special style sheet link in the <head> section and then refer to the font in the CSS.
Example
Here, we want to use a font named "Love Light" from Google Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Love+Light">
<style>
body {
font-family: "Love Light", cursive;
}
</style>
</head>
Result:
Love Light Font
Lorem ipsum dolor sit amet.
123456790
Example
Here, we want to use a font named "Trirong" from Google Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Result:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Example
Here, we want to use a font named "Audiowide" from Google Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Result:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Note: When specifying a font in CSS, always list at minimum one fallback font (to avoid unexpected behaviors). So, also here you should add a generic font family (like serif or sans-serif) to the end of the list.
Use Multiple Google Fonts
To use multiple Google fonts, just separate the font names with a pipe character (|), like this:
Example
Request multiple fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Love+Light|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Love Light", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Result:
Audiowide Font
Love Light Font
Trirong Font
Note: Requesting multiple fonts may slow down your web pages! So be careful about that.
Styling Google Fonts
Of course you can style Google Fonts as you like, with CSS!
Example
Style the "Love Light" font:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Love+Light">
<style>
body {
font-family: "Love Light", cursive;
font-size: 30px;
text-shadow: 3px 3px 3px #0054ff;
}
</style>
</head>
Result:
Love Light Font
Lorem ipsum dolor sit amet.
123456790
Enabling Font Effects
Google has also enabled different font effects that you can use.
First add effect=effectname to the Google API, then add a special class name to the element that is going to use the special effect. The class name always starts with font-effect- and ends with the effectname.
Example
Add the fire effect to the "Sofia" font:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Love+Light&effect=fire">
<style>
body {
font-family: "Love Light", cursive;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Love Light on Fire</h1>
</body>
Result:
Love Light on Fire
To request multiple font effects, just separate the effect names with a pipe character (
|), like this:Example
Add multiple effects to the "Love Light" font:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Love+Light&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Love Light", cursive;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>
</body>
Result:
Comments
Post a Comment