Friday, June 11, 2021
By using @font-face declaration you can use custom fonts in your web pages. The way this works is that you can host the fonts on your server, and then the user agent will download the font for future renders, for example you can specify the following markup to use a custom font that's not widely available.
@font-face{
font-family: "Verana";
src: url("Verana-Regular.otf");
}
You can get the free fonts here at Arkandis Digital Foundry to play around with custom fonts.
The url can be a local resource within the local server, or a remote resource on the internet.
The way you would use the font-face is just like a regular font:
h2 {font-family: Verana; font-size: 24pt;}
Here is the entire HTML markup:
Previous: CSS Parent Child Selectors
@font-face{
font-family: "Verana";
src: url("Verana-Regular.otf");
}
You can get the free fonts here at Arkandis Digital Foundry to play around with custom fonts.
The url can be a local resource within the local server, or a remote resource on the internet.
The way you would use the font-face is just like a regular font:
h2 {font-family: Verana; font-size: 24pt;}
Here is the entire HTML markup:
<html>
<head>
<style>
@font-face{
font-family: "Verana";
src: url("Verana-Regular.otf");
}
h2 {font-family: Verana; font-size: 24pt;}
</style>
</head>
<body>
<h2>Verana Font</h2>
</body>
</html>
Previous: CSS Parent Child Selectors
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment