Loading lesson path
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.
Formula
Just add a special style sheet link in the < head > section and then refer to the font in the CSS.Here, we want to use a font named "Sofia" from Google Fonts: <head> <link rel="stylesheet"
Formula
href ="https://fonts.googleapis.com/css?family = Sofia"><style>
body {
font-family: "Sofia", sans-serif;
}</style> </head>
Lorem ipsum dolor sit amet. 123456790
Here, we want to use a font named "Trirong" from Google Fonts: <head> <link rel="stylesheet"
Formula
href ="https://fonts.googleapis.com/css?family = Trirong"><style>
body {
font-family: "Trirong", serif;
}</style> </head>
Lorem ipsum dolor sit amet. 123456790
Here, we want to use a font named "Audiowide" from Google Fonts: <head> <link rel="stylesheet"
Formula
href ="https://fonts.googleapis.com/css?family = Audiowide"><style>
body {
font-family: "Audiowide", sans-serif;
}</style> </head>
Lorem ipsum dolor sit amet. 123456790
When specifying a font in CSS, always list at minimum one fallback font (to avoid unexpected behaviors).
Formula
So, also here you should add a generic font family (like serif or sans - serif) to the end of the list.
For a list of all available Google Fonts, visit our
How To - Google Fonts Tutorial.To use multiple Google fonts, just separate the font names with a pipe character ( | ), like this:
<head> <link rel="stylesheet"
Formula
href ="https://fonts.googleapis.com/css?family = Audiowide|Sofia|Trirong"><style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}</style> </head>
Requesting multiple fonts may slow down your web pages! So be careful about that.
Of course you can style Google Fonts as you like, with CSS!
Style the "Sofia" font: <head> <link rel="stylesheet"
Formula
href ="https://fonts.googleapis.com/css?family = Sofia"><style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}</style> </head>
Lorem ipsum dolor sit amet. 123456790