Computer >> Computer tutorials >  >> Programming >> CSS

Font Family in CSS


The CSS font-family property is used to set a specific font for the selected element. It is recommended to use web-safe fonts by specifying additional fonts to ensure cross-browser compatibility.

Syntax

The syntax of CSS font-family property is as follows &mins;

Selector {
   font-family: /*value*/
}

The following examples illustrate CSS font-family property −

Example

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
   background-color: thistle;
   font-family: "Magneto", Arial;
}
p {
   font-family: "Segoe Print", serif;
   font-size: 1.4em;
}
</style>
</head>
<body>
<h2>Learn Fortran</h2>
<p>Fortran, as derived from Formula Translating System, is a general-purpose, imperative programming language. It is used for numeric and scientific computing.</p>
</body>
</html>

Output

This gives the following output −

Font Family in CSS

Example

<!DOCTYPE html>
<html>
<head>
<style>
th {
   font-family: "Franklin Gothic Book", Arial;
   border: thin solid blue;
}
td {
   font-family: "Lucida Console", serif;
   font-size: 1.1em;
   box-shadow: inset 0 0 3px black;
}
caption {
   font-family: Broadway;
   font-size: 24px;
}
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>DEMO 1</th>
<th>DEMO 2</th>
</tr>
<tr>
<td>demo a</td>
<td>demo b</td>
</tr>
<tr>
<td>demo c</td>
<td>demo d</td>
</tr>
</table>
</body>
</html>

Output

This gives the following output −

Font Family in CSS