font-face at-rule

The @font-face at-rule is intended to display text on web pages loaded from a remote server or from the user's local computer. If the rule declares the local function, then the font search will be carried out primarily on this local computer. If the font is not found, the font specified in the url function will be used.

Syntax

@font-face {
	font name;
	font search source;
}

Example

Let's find a font on our local computer:

<body>
	This is Montserrat SemiBold.
</body>

@font-face {
	font-family: "Montserrat SemiBold";
	src: local("Montserrat SemiBold");
}
	
body {
	font-family: "Montserrat SemiBold";
}

#elem {
	animation: anim 3s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Example

Now let’s specify the url of the remote server to search for the font:

<body>
	This is Bitstream Vera Serif Bold.
</body>

@font-face {
	font-family: "Bitstream Vera Serif Bold";
	src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
}
	
body {
	font-family: "Bitstream Vera Serif Bold", serif;
}

#elem {
	animation: anim 3s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}