Beamtic's logo

Share via:

How to make Italic Fonts With CSS

How to make italic text by changing the font-style of parts, or all, of the text on a HTML page.

112 views

Edited: 2020-09-26 13:29

Before attempting to make a font italic from CSS, it is important to keep in mind that not all fonts has an italic version, or it might not be loaded; if a font does not have a italic font face, the italics might be simulated.

If you use a custom font, then it is important to also link to the italic version of the font when it is available.

To turn parts of text italic, you will need to first mark up the part of the text you want to be italic. In your HTML, you may use either the <span> element with font-style:italic;, or the standard <i> element — the i element turns text italic by default.

<p>This is some text and <i>this is written with an italic font</i>. We can control italics with CSS font-style.</p>

The <i> element is an inline element, and so is the <span> element.

Example:

I was riding the bus one day when suddenly the driver just got up and left, without saying anything — I wonder if he was having a bad day?

Pick a style for the example:

Possible font-style values:

  • normal
  • italic
  • oblique
  • oblique [angle]

Inheritance and CSS selectors

If you want to turn the text italic inside a container you can also use the font-style property on the parent element; the style will then be applied on all the child-elements due to CSS inheritance.

#my_container {
  font-style:italic;
}

And the HTML:

<div id="my_container">
  <p>All text in this container will be written with italic unless overwritten by higher-priority declarations.</p>
</div>

Result:

All text in this container will be written with italic unless overwritten by higher-priority declarations.

Of course, this also works with class- and element selectors:

.my_class_name {
  font-style:italic;
}
b {
  font-style:italic;
}

Embedded CSS

When embedding the CSS in the HTML, you can use the style element:

<style>
  .italic {
    font-style:italic;
  }
</style>
<div class="italic">
  <p>This text is using font-style:italic; in the CSS.</p>
</div>

It is important to place the style code before the elements that you want to style in order to prevent re-painting of the page.

The .italic class we created in the above examples can be applied to any element that you want to apply italics to.

How to change the font-style of text

How you should change the font-style of text is generally going to depend on the circumstances. Ideally you should place all of your CSS in your external stylesheet, and that also includes small modifications such as adding italics. If you avoid mixing HTML with CSS, your code will usually be easier to maintain in the longer term; but this is not always possible or practical.

There are a few ways you can go about changing the. Do it inline, directly on the HTML elements using the style attribute — this is not recommended, but sometimes fine when you know what you are doing.

<p>This is some text and <span style="font-style:italic;">this is written with an italic font</span>. We can control italics with CSS font-style.</p>

The second way to change styling directly from the HTML code is by embedding the CSS in the HTML using the <style> element — although not recommended for most things, it may work for small boxes or modules that are inserted on a page.

<style>
  .italic {
    font-style:italic;
  }
</style>
<p>This is some text and <span class="italic">this is written with an italic font</span>. We can control italics with CSS font-style.</p>

Note. Often you will find examples that includes the type="text/css" attribute on the style element, but this is redundant and not required in HTML5.

Nowadays it is quite common to embed CSS directly in the HTML for certain things. If you are developing a plugin for a CMS system or similar, then it is generally going to be better to place the code in external CSS files — these files may then be managed by the CMS automatically.

Using external CSS files will often help you to easier maintain your code. When linking to external CSS files, you will be using the <link> element, and this can either be located in the head or the body — it may not validate in the body, but it is supported, and some websites use it to delay loading of parts of the CSS. Most of you should probably stick to using the head, as the alternative is complex and difficult to get right:

<link rel="stylesheet" href="my-stylesheet.css">

Loading italic fonts

If you are using custom fonts on your website, then you need to make sure to include the italic version of the font you are using. When linking to custom fonts, we use the font-face rule to link the relevant fonts.

Each individual font is linked using its own font-face rule via the src property. Within the src, you may also include alternative formats — if a browser does not understand one format, it should automatically try another — it is common to have both woff and woff2 versions of the same font.

So, if we download and use Open Sans as an example, the CSS that includes our font should look like:

/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
         url('/fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/open-sans-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}
  /* open-sans-italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local('Open Sans Italic'), local('OpenSans-Italic'),
         url('/fonts/open-sans-v15-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/open-sans-v15-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}
  /* open-sans-700 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
         url('/fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/open-sans-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}
  /* open-sans-700italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
         url('/fonts/open-sans-v15-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/open-sans-v15-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}

Please note that the fonts themselves should be uploaded to the /fonts/ directory on your website for this to work.

Comments

  1. How to add hover effects on links using CSS pseudo classes.
  2. How to change numbers and bullets on HTML lists like ol and ul.
  3. Here you can learn how to change the background of every second HTML element in a parent with CSS.
  4. How to set the cellspacing and cellpadding of HTML tables with pure CSS.

More in: CSS Styling