CSS Web Fonts

CSS Web Fonts

CSS Web Fonts 
If you don't want to use the web-safe fonts (and who wants to see another website in Arial or Times New Roman!), you are in luck. 
Web fonts allow the CSS to link to a font file that the browser can download. 
By using a web font, you can have a much more consistent look – plus,
There are many beautiful web fonts out there that will enhance the look of your site or app.
There are several different supported web font formats - 
  • Web Open Font Format version 1 or 2 (WOFF/WOFF2).
  • Embedded Open Type (EOT)
  •  TrueType Font (TTF)
  •  Scalable Vector Graphics (SVG)
Modern browsers support WOFF and WOFF2. 
The other font formats are for support with older browsers. 
A web font is typically packaged in several different formats, all of which can be referenced in the CSS.
A web font is registered using the @font-face at-rule. 
A @font-face rule declares a new font. The desired name of the font is given with the font-family property, and one or more source URLs are given with the src property. 
Each source URL is followed by a format declaration which tells the browser which font format to expect for that file. 
Once you have declared the font in a @font-face rule, you can then use the name you gave it in any font-family property in a CSS rule.
Example - This example will load the SomeWebFont font in WOFF2 and WOFF formats and set it as the font for the whole document. You should still provide a list of fallback fonts in case the font is not supported by the user's browser or could not be loaded.
@font-face {
font-family: 'SomeWebFont';
url('/some-font.woff2') format('woff2'),
url('/some-font.woff') format('woff');
body {
font-family: SomeWebFont, Arial, sans-serif;
<h1>This is a heading
<p>Lorem ipsusdf Lorem ipsum dolor sit amet,</p>


Output -