Lệnh font-face

Lệnh @font-face cho phép thiết lập một phông chữ tùy chỉnh có nguồn được lưu trữ trong một tệp. Phông chữ này sau đó có thể được kết nối bằng thuộc tính font-family.

Cú pháp

@font-face {
	tên phông chữ;
	nguồn tìm kiếm phông chữ;
}

Ví dụ

Hãy tìm một phông chữ trên máy tính cục bộ của chúng ta:

<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;
}

Ví dụ

Và bây giờ hãy chỉ định một địa chỉ máy chủ từ xa để tìm phông chữ:

<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;
}