CSS @font-face Rule
- Introduction to CSS @ font-face rule
- The syntax of CSS @ font-face rule
- Example of CSS @ font-face rule
Introduction to CSS @ font-face Rule
Some fixed fonts are already stored in all devices such as a personal computer, laptop, and mobile, etc. These are called web safe fonts. It is a global standard, under which all the devices have to store these fonts.
When users view a website through their device, then using some of those fonts show the content of that website. If there is no other font face other than web safe fonts used for the website then it will not show them because the font face is not installed on their devices.
This is the reason that web designers use more web safe fonts only when designing websites. But designers get bound and the design of the website is fixed because designers can't use other fonts other than web safe fonts.
A very useful @font-face rule has been introduced in CSS3 as a solution to this problem. This rule is known as @ font-face.
With CSS @font-face rule, you can use any font in your webpage and this font is not required to be installed on the user's device. This policy provides the ability to use a custom font in webpages.
The fonts that you want to use through this rule first define its name and then define that location where the font is stored. This location is mainly on a server so that everyone can show the webpage in the same font.
If you want to store font on a particular device, you can pass that location too, But by doing so, that font will only show on that device.
The location at which you store the font is used to display the webpage by fetching from the font location when the web page is loaded.
But one thing you should keep in mind is that unless font-family property defines that font for the webpage, the font will not show in your web page. CSS @font-face rule only links the webpage to that font.
After this, the way you normally use the font-family property to define different fonts, the same way your custom font will also have to be defined in this webpage by this property.
This rule is supported by all modern browsers so you can use it for your web applications without any interruption.
Syntax of CSS @ font-face Rule
The general syntax of the @font-face rule has been given below.
@ font-face
{
font-family: "name-of-font";
src: "location-of-font";
---More properties---
}
As you can see in the above syntax, some properties are used to provide information about the custom font. These are called font descriptors. The font descriptors can be used with this rule as below.
font-family
By this font-family property, you define the name of the custom font.
src
This src property is used to define the location where the font is stored. The URL function is used to define a location.
font-stretch
This font-stretch property is optionally defined. By this property, you define how the font will stretch. Some common values of this property are normal, condensed and expanded.
font-style
This font-style property is optionally defined. This property defines the style of the font. The values of this property are normal, italic and oblique.
font-weight
This font-weight property is optionally defined. This property defines boldness of the font. Some common values of this property are bold, bolder and boldest, etc.
unicode-range
This Unicode range property is optionally defined. This property defines those Unicode characters that font supports.
format
This is a function which is used to define the font format. WOFF (Web Open Font Format) format is used for all modern browsers. In older versions of Internet Explorer, TTF (TrueType Font) and OTF (OpenType Font) formats are used.
Example of CSS @ font-face Rule
The CSS @font-face rule has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> CSS @font-face Example </title>
<style>
body{
width: 40%;
}
@font-face
{
font-family: Roboto;
src: url('roboto.woff')format('woff');
}
h1
{
font-family: 'Roboto', sans-serif;
font-size: 30px;
}
p{
font-stretch: expanded;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<h1> My Blog Help </h1>
<p> MyBlogHelp is a website where articles are shared like Blogging, SEO, Web Design, Web Development, HTML, CSS and Computer related all Tips. </p>
<style>
body{
width: 40%;
}
@font-face
{
font-family: Roboto;
src: url('roboto.woff')format('woff');
}
h1
{
font-family: 'Roboto', sans-serif;
font-size: 30px;
}
p{
font-stretch: expanded;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<h1> My Blog Help </h1>
<p> MyBlogHelp is a website where articles are shared like Blogging, SEO, Web Design, Web Development, HTML, CSS and Computer related all Tips. </p>
</body>
</html>
The above example will generate the below output.
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.