The font-style
CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Italic font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while oblique faces are usually just sloped versions of the regular face. When the specified style is not available, both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (use font-synthesis
to control this behavior).
Syntax
font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 10deg; /* Global values */ font-style: inherit; font-style: initial; font-style: unset;
The font-style
property is specified as a single keyword chosen from the list of values below, which can optionally include an angle if the keyword is oblique
.
Values
normal
- Selects a font that is classified as
normal
within afont-family
. italic
- Selects a font that is classified as
italic
. If no italic version of the face is available, one classified asoblique
is used instead. If neither is available, the style is artificially simulated. oblique
- Selects a font that is classified as
oblique
. If no oblique version of the face is available, one classified asitalic
is used instead. If neither is available, the style is artificially simulated. oblique
<angle>
- Selects a font classified as
oblique
, and additionally specifies an angle for the slant of the text. If one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. If no oblique faces are available, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. Valid values are degree values of-90deg
to90deg
inclusive. If an angle is not specified, an angle of 14 degrees is used. Positive values are slanted to the end of the line, while negative values are slanted towards the beginning.
In general, for a requested angle of 14 degrees or greater, larger angles are prefered; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm).
Variable fonts
Variable fonts can offer a fine control over the degree to which an oblique face is slanted. You can select this using the <angle>
modifier for the oblique
keyword.
For TrueType or OpenType variable fonts, the "slnt"
variation is used to implement varying slant angles for oblique, and the "ital"
variation with a value of 1 is used to implement italic values. See font-variation-settings
.
For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which font-style: oblique
can accept an <angle>
.
HTML
<header> <input type="range" id="slant" name="slant" min="-90" max="90" /> <label for="slant">Slant</label> </header> <div class="container"> <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p> </div>
CSS
/*
AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
and is used here under the terms of its license:
https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
*/
@font-face {
src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
font-family:'AmstelvarAlpha';
font-style: normal;
}
label {
font: 1rem monospace;
}
.container {
max-height: 150px;
overflow: scroll;
}
.sample {
font: 2rem 'AmstelvarAlpha', sans-serif;
}
html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; }
JavaScript
let slantLabel = document.querySelector('label[for="slant"]'); let slantInput = document.querySelector('#slant'); let sampleText = document.querySelector('.sample'); function update() { let slant = `oblique ${slantInput.value}deg`; slantLabel.textContent = `font-style: ${slant};`; sampleText.style.fontStyle = slant; } slantInput.addEventListener('input', update); update();
Accessibility concerns
Large sections of text set with a font-style
value of italic
may be difficult for people with cognitive concerns such as Dyslexia to read.
Formal definition
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
normal | italic | oblique <angle>?
Examples
Font styles
<p class="normal">This paragraph is normal.</p> <p class="italic">This paragraph is italic.</p> <p class="oblique">This paragraph is oblique.</p>
.normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 4 The definition of 'font-style' in that specification. |
Working Draft | Adds the ability to specify an angle after oblique |
CSS Fonts Module Level 3 The definition of 'font-style' in that specification. |
Candidate Recommendation | No change |
CSS Level 2 (Revision 1) The definition of 'font-style' in that specification. |
Recommendation | No change |
CSS Level 1 The definition of 'font-style' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font-style | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
1
| IE Full support 4 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android
Full support
4
| Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
oblique can accept an <angle> | Chrome No support No | Edge No support No | Firefox Full support 61 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 61 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.