Non-standard fonts refers to any font in CSS that does not belong to the default set of fonts available in most browsers. Default fonts include Arial, Times New Roman, and Verdana, which are standard fonts because they come preinstalled on most computers and devices.
Non-standard fonts refers to fonts that are not pre-installed and must be specially loaded on the website before they can 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 can help add a unique and personal touch to your website design. They are often used to create a specific look or establish a brand's visual identity.
Add some non-standard fonts to the website in CSS
Typography plays a vital role when designing a website. The default fonts provided in CSS, such as Arial, Times New Roman, and Verdana, while functionally available, often appear bland and generic.
The @font-face rule allows specifying font files and properties so that the font can be applied to specific elements on the page.
Syntax
The syntax for using @font-face rules 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 specified the font family as 'MyFont', which is the name that will be used to reference this font throughout CSS. The 'src' attribute specifies the location of the font file, and the 'format' attribute 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 a font is defined using the @font-face rule, it can be applied to specific elements on the page using the 'font-family' attribute. In the example below, we apply the custom font 'MyFont' to the 'body' element −
body {
font-family: 'MyFont', Fallback, sans-serif;
}
The Chinese translation of Example
is: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 fonts from remote sources like Google Fonts or any other font hosting service.
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
The Chinese translation of Example
is: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 id="Google-fonts-example">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>
in conclusion
Through the above steps, we have successfully added non-standard fonts to the website. Remember, it is important to ensure that the font files are hosted on the server and accessible to the browser in order for the fonts to render correctly.
The above is the detailed content of How to add some non-standard fonts to the website in CSS?. For more information, please follow other related articles on the PHP Chinese website!
Preloading Pages Just Before They are NeededApr 16, 2025 am 09:53 AMThe typical journey for a person browsing a website: view a page, click a link, browser loads new page. That's assuming no funny business like a Single Page
Adaptive Photo Layout with FlexboxApr 16, 2025 am 09:51 AMLet’s take a look at a super lightweight way to create a horizontal masonry effect for a set of arbitrarily-sized photos. Throw any set of photos at it, and
The Many Ways to Link Up Shapes and Images with HTML and CSSApr 16, 2025 am 09:45 AMDifferent website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or
Web Developer Search HistoryApr 16, 2025 am 09:41 AMSophie Koonin blogged "Everything I googled in a week as a professional software engineer," which was a fascinating look into the mind of a web developer and
What happens when you open a new install of browsers for the 1st time?Apr 16, 2025 am 09:29 AMInteresting research from Jonathan Sampson, where he watches the network requests a browser makes the very first time you launch it on a fresh install, and
Web Development Merit BadgesApr 16, 2025 am 09:26 AMA collection of front-end development achievements. How many can you collect?
Clipping, Clipping, and More Clipping!Apr 16, 2025 am 09:22 AMThere are so many things you can do with clipping paths. I've been exploring them for quite some time and have come up with different techniques and use cases
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Chinese version
Chinese version, very easy to use
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
Zend Studio 13.0.1
Powerful PHP integrated development environment
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Atom editor mac version download
The most popular open source editor
