Font-style | CSS-Tricks

The font-style property allows you to make text appear italicized (i.e. sloped, or slanted).

em {
  font-style: italic;
}

This property accepts one of three possible values: normal, italic, and oblique.

If a given font family has an italic or oblique face embedded, the browser will select that face. If no italic or oblique face is available, the browser will mimic the sloping effect. If italic is defined and there is no italic face available, the browser will look for an oblique face before it tries to mimic the italic. The same applies to oblique; it too will look first for an italic face.

To prevent the browser from adding a mimicked, or synthesized, version of the italic or oblique face, you may use the font-synthesis property (if supported).

Italic vs. Oblique

According to the spec, “Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face.” However, if the font being used does not have italic or oblique faces available, in most cases there is little, if any, difference between italic and oblique.

The demo below demonstrates both italic and oblique:

See the Pen Italic vs. oblique with CSS font-style by CSS-Tricks (@css-tricks) on CodePen.

Related Properties

Other Resources

Browser Support

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Works	Works	Works	Works	Works	Works	Works

Comments

Chase Dickinson

# November 14, 2014

Hey my italic isn’t working for external css,
stylesheet

body{
background-color: #FF0099;

p.normal {
    font-style: normal;

}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

My website

3 movies
Tommy Boy with Chris Farley, Anchorman: the Legend of Ron Burgundy, with Will Ferral, and Dumb and Dumber, with Jim Carrey




 Tommy Boy is about, his dad's (Who died) business Callahan Auto parts is going out of busniess and Tommy is trying to save the business and sells Zalinski buys 500,000 break-pads to keep in business. Directored by Peter Segal. I would give this movie a 10 out of 10. Due to Chrisa Farley and his comedy in this movie is genuis.

 Anchorman is about Rob and his News Team. There is a girl journalist and she is trying to take Rob's job and Rob ends up getting fired. She becomes Anchor. In the end They co-anchor each other in the News for the World. Directored by Adam McKay. I would rate this movie a 9 out of 10 due to Will fereel going over the top. It ain't a 10 because Steve Caroll gets a gernade. That is dangerous.

 Dumb and Dumber is about Lloyd is trying to find the girl of his dreams because she left a brief case behind. Directored by Peter Farrelly and Bobby Farrelly. I would rate my movie a 9 out of 10 due to Jim Carrey and Jeff Daniels going out and trying to be kids again. It isn't a 10 due to the fact that it is really dumb.

what should i do?
my email
[email protected]

Kieran

# December 6, 2014

Your body tag is missing it’s closing brackets. Try

body{
    background-color: #FF0099;
}

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Geej Mauriva

# August 7, 2015

Hi there,
I put this code:
em {
font-style: italic;
}

in my external CSS shhet on my site site here: http://alaskahealer.com/services/

Here’s the html on the page: No drop ins. By appointment only.
It does not show up italicized in Safari and IE 11

Code Pen: http://codepen.io/anon/pen/rVRVQm

Do you know why?

Geej

Louis

Permalink to comment# August 7, 2015
Hi Geej,

The reason that’s happening is because you are you using a font called “Muli”, which is this one:

http://www.fontsquirrel.com/fonts/muli

That’s only the regular Muli font. It doesn’t seem to have an italic version, it’s just the regular one. If you change the CSS to the following, it will work:
```
em {
    font-style: italic;
    font-family: "muli italic", sans-serif;
}
```
Or any other way to include the “muli italic” version of the font.

Margaret Munnelly

# May 22, 2016

I can’t change my email font — getting bold.

posthumanist

# February 3, 2018

Hi! Louis I would like to use Menlo for the normal paragraph text but a different font (Arial) for italic text and H1 H2 etc but i can’t seem to figure out the code. Can you point me in the right direction??
Many thanks
johannes

Louis Lazaris

Permalink to comment# February 4, 2018
You have to define that in your CSS.
```
p {
  font-family: Menlo, sans-serif;
}

h1, h2, em {
  font-family: Arial, sans-serif;
}
```
That’s one way to do it, but it also depends on what else is in your stylesheet.

posthumanist

# February 4, 2018

thank you Louis!

font style

# July 12, 2018

when I use in my wordpress theme css it always comes out bold. tried !Important as well. but still the same. anyone has any idea. its not the main style.css

Italic vs. Oblique

Related Properties

Other Resources

Browser Support

Comments

Leave a Reply Cancel reply