In CSS, it is a rule that specifies a custom font. This allows us to expand our scope beyond the web-safe fonts. In this rule, @font-face must be first defined and then webpage elements can be made to refer to it as required. To define multiple font files under the same font name. Framing
this in a more understandable way, what we are trying to do here is
that if we want to display a specific font in multiple other ways like
bold, italics, etc. traditionally we must define them separately. But,
here we will look at a way to combine these font files in a single font
name.
Here is the code and demo below:
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: "KhmerOSMoulLightregular";
src: url("KhmerOSMoulLight-regular-webfont.woff2")
format("woff2"),
url("KhmerOSMoulLight-regular-webfont.woff")
format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "KhmerOSMoulLightbold";
src: url("KhmerOSMoulLight-bold-webfont.woff2")
format("woff2"),
url("KhmerOSMoulLight-bold-webfont.woff")
format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "KhmerOSMoulLightitalic";
src: url("KhmerOSMoulLight-italic-webfont.woff2")
format("woff2"),
url("KhmerOSMoulLight-italic-webfont.woff")
format("woff");
font-weight: normal;
font-style: normal;
}
.first {
font-family: "KhmerOSMoulLightregular";
color: green;
}
.second {
font-family: "KhmerOSMoulLightbold";
color: green;
}
.third {
font-family: "KhmerOSMoulLightitalic";
color: green;
}
</style>
</head>
<body>
Khmer Font Style
<div class="first">Khmer Font Style</div>
<div class="second">Khmer Font Style</div>
<div class="third">Khmer Font Style</div>
</body>
</html>
0 Comments