Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add some non-standard font to a website in CSS?
A non-standard font refers to any font that is not a part of the default set of fonts that are available in most browsers in CSS. Default fonts, including Arial, Times New Roman, and Verdana, are standard fonts because they are pre-installed on most computers and devices.
Non-standard fonts are fonts that are not pre-installed and must be specifically loaded onto a website in order to be used. These fonts can be obtained from websites such as Google, Adobe, or MyFonts. They can also be custom-designed or purchased.
Using non-standard fonts helps to add a unique and personalized touch to a website's design. They are often used to create a specific look or establish a brand’s visual identity.
Add some non-standard font to a website in CSS
Typography plays a crucial role in creating an aesthetic appeal When it comes to designing a website. The default fonts available in CSS such as Arial, Times New Roman, and Verdana, while functional, often appear bland and generic.
The @font-face rule enables to specify the font file and properties, allowing to apply the font to specific elements on the page.
Syntax
The syntax for using the @font-face rule is as follows −
@font-face { font-family: 'MyFont'; src: url('path/to/MyFont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
In this example, we have specified the font-family as 'MyFont', which is the name that will be used to reference the font throughout the CSS. The 'src' property specifies the location of the font file and the 'format' property specifies the file format of the font. For better browser compatibility, It is recommended to include multiple font formats such as truetype, woff, woff2, eot etc.
Once the font is defined using the @font-face rule, it applied to specific elements on the page using the 'font-family' property. In the following example, we apply the custom font 'MyFont' to the 'body' element −
body {
font-family: 'MyFont', Fallback, sans-serif;
}
Example
<html>
<head>
<style>
body {
background-color:pink;
}
@font-face {
font-family: 'MyFont';
src: url('/css/font/SansationLight.woff')
format('truetype');
font-weight: normal;
font-style: normal;
}
p {
font-family: 'MyFont', Fallback, sans-serif;
}
.div {
font-family: 'MyFont', Arial, sans-serif;
}
</Style>
</head>
<body>
<div class="div">This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS.</p>
</body>
</html>
We can also use @import to import a font from a remote source such as Google Fonts or any other font hosting services.
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
Example
<!DOCTYPE html>
<html>
<title>Google fonts example</title>
<head>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"/>
<style>
body {
font-family: "Permanent Marker";
font-size: 15px;
}
</style>
</head>
<body>
<h1>Google fonts example</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiores</p>
</body>
</html>
Conclusion
We saw by the above steps; we have able to successfully add a nonstandard font to the website. Keep in mind that it is important to ensure that the font file is hosted on a server and is accessible to the browser for the font to be properly rendered.
301 Views
