Search w3schools.

com: Selectai limba

HOME HTML CSS JAVASCRIPT JQUERY XML ASP.NET PHP SQL MORE...

REFERENCES | EXAMPLES | FORUM | ABOUT

SHARE THIS PAGE

Like

59k

CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser Support

CSS3 @font-face Rule

CSS Reference
Example
Specify a font named "myFirstFont", and specify the URL where it can be found:

font-size-adjust Property

@font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9 */ }

Try it yourself

CSS Properties
animation appearance backface-visibility background border bottom box caption-side clear clip color column content counter-increment counter-reset cursor direction display empty-cells float font font font-family font-size font-style font-variant font-weight @font-face font-size-adjust font-stretch grid-columns grid-rows hanging-punctuation height icon left letter-spacing line-height list-style margin max-height max-width min-height min-width nav opacity outline overflow overflow-x overflow-y padding page-break perspective perspective-origin position punctuation-trim quotes resize right rotation rotation-point table-layout target text top transform transition vertical-align unicode-range font-weight font-style src font-stretch URL normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded normal italic oblique normal bold 100 200 300 400 500 600 700 800 900 unicode-range Required. Defines the URL(s) where the font should be downloaded from Optional. Defines how the font should be stretched. Default value is "normal" Font descriptor font-family Values name Description Required. Defines the name of the font. The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari. However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts. Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.

Browser Support

Definition and Usage

With the @font-face rule, web designers do no longer have to use one of the "web-safe" fonts. Make a font-face rule by giving the font a name: font-family: myFirstFont; Include a font file somewhere on your server, and refer to it with CSS: src: url('Sansation_Light.ttf') If the font file is located at a different domain, use a full URL instead: src: url('http://www.w3schools.com/css3/Sansation_Light.ttf'). Now the font is ready to use, below is an example of how to use it for all div elements:

div { font-family: myFirstFont; }

Syntax
@font-face { font-properties }

Optional. Defines how the font should be styled. Default value is "normal"

Optional. Defines the boldness of the font. Default value is "normal"

Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF"

Related Pages
CSS3 tutorial: CSS3 Fonts

CSS Reference

font-size-adjust Property

visibility width white-space word-spacing word-break word-wrap z-index

Top 10 Tutorials
HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

Top 10 References
HTML/HTML5 Reference CSS 1,2,3 Reference CSS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML Colors

Examples
HTML Examples CSS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples

Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz CSS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picker

Statistics
Browser Statistics Browser OS Browser Display

REPORT ERROR | HOME | TOP | PRINT | FORUM | ABOUT | ADVERTISE WITH US

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. Copyright 1999-2013 by Refsnes Data. All Rights Reserved.