CSS Property: font-family
[this page | pdf | back links]
The CSS (CSS1) font-family property indicates the
font to be used for an element. It can include several values, separated by
commas (typically starting from more specific fonts and ending with more
generic fonts). If the browser doesn’t support the first font in the list, it
tries the next one etc. Font family names can be:
-
Specific, e.g. "Times New
Roman", Arial; or
-
Generic, e.g. serif, cursive
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
family-name / generic-family
/ list
|
A prioritised list of
specific or generic font family names. Note: if a font name contains a space
then it must be enclosed in quotes
|
|
Default Value:
|
Depends on browser
|
|
JavaScript syntax:
|
e.g. object.style.fontFamily="Verdana,serif"
|
|
Inherited:
|
Yes
|
|
Animatable:
|
No
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div {width: 100px; border: 1px dotted black;}
.x1 {font-family: cursive;}
</style>
</head>
<body>
1. Element with default property<br><br>
<div>abcdefgh</div><br><br>
2. Element set using in-file HTML style<br><br>
<div class="x1">abcdefgh</div><br><br>
3. Element set using JavaScript<br><br>
<div id="x2">abcdefgh</div>
<script>
document.getElementById("x2").style.fontFamily = "cursive";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyFontFamily() {
var x = document.createElement("DIV"); x.style.fontFamily = "cursive"; return (window.getComputedStyle(x, null).fontFamily == "cursive");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties