Loading Please Wait...
The CSS provides properties and techniques to install or embed new fonts if you do not want to use standard fonts.
The CSS @font-face at-rule specifies a custom font with which to display text; the font can be loaded from locally-installed font on the user's own computer.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body { font-family: "MyWebFont", sans-serif; }
Web Open Font Format
Scalable Vector Graphics Font
Embedded Open Type
OpenType Font and TrueType Font
If your font is hosted on other server, it is better to use @import.
Google Fonts are widely used and free font to among 1000+ fonts available. Let use Nunito Sans font.
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');
body { font-family: 'Nunito Sans', sans-serif; }
We can also link font usnig <link>Tag .
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet">
<style>
body { font-family: 'Nunito Sans', sans-serif; }
</style>
When we are using more than one fonts, it is recommended to use fonts that matches the design.
It is always safe to find font pairings that complement one another.
A font super family is a set of fonts designed to work well together. So, using different fonts within the same superfamily is safe.
Two fonts that are too similar will often conflict. However, contrasts, done the right way, brings out the best in each font.
One font should be the primary. This establishes a hierarchy for the fonts on your page. This can be achieved by varying the size, weight and color.
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved