There are many ways to apply a font to the text on your site, including the use of web-safe fonts, custom fonts, and Google fonts.
Web-Safe Font Families
When setting a font to be used site-wide or even on a specific set of elements, a font-family is used.
The font-family property specifies the font for an element containing several font names as a “fallback” system. The browser will try the first font, then the second, and so on, using the first font available to it.
Often, the use of web-safe font families will allow for a faster-loading site and help to keep the site looking as intended by the developer.
body {
font-family: "Times New Roman", Times, serif;
}
@font-face Rule
If one of the web-safe font families isn’t what you’re lookin for, you can add a font to the site by using the @font-face Rule. What this does is allows you to upload a specialty font along with your site, and link to it in a .css document. Then you can include it in your styles.
@font-face {
font-family: "Open Sans";
src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"),
url("/fonts/opensans-regular-webfont.woff") format("woff");
}
@font-face {
font-family: "Open Sans";
src: url("/fonts/opensans-regular-webfont.woff2") format("woff2"),
url("/fonts/opensans-regular-webfont.woff") format("woff");
}
@font-face {
font-family: "OpenSansBold";
src: url("/fonts/OpenSans-Bold.ttf") format("truetype");
}
Using the Custom Font
When the user lands on your site, the specialty font will be downloaded to their browser and used to display the text of your site.
The following uses a web-safe font family for the bulk of the website (set on the body tag), and uses the @font-face font for the heading tags.
body {
font-family: "Times New Roman", Times, serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: OpenSansBold, sans-serif;
}
Google Fonts
Google has a large repository of fonts that can be linked to and used for free. What you do is go to their font repository and choose the font (and any specific font characteristics you want), and then either link to it on an HTML page (not the best way) or import it into your CSS style sheet (better).
HTML Link
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Raleway:400,300,600">
@import Rule
If using the @import method, do so just after the opening @charset line, before any specific styling rules are being written.
@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
Using the Google Font
Using the font is no different than using a web-safe font family or @font-face custom font.
body {
font-family: Raleway, sans-serif;
font-weight: 300;
}
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
CSS NOTES:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
