CODEWITHSUNDEEP
css
DavidAlexanderPerez
DavidAlexanderPerez

Reputation: 17

How to make a text cursive in CSS?

I know it's easy but for some reason I can't find this answer. I have tried everything, using font-family and font-style.

Upvotes: 0

Views: 47584

Answers (7)

IsThisAGoodUsernameQuestionMar
IsThisAGoodUsernameQuestionMar

Reputation: 21

You can use the i or em tag. For example

<p>This is an <em>emphasized text</em> and this is <i>cursive</i></p>

Upvotes: 2

Joe Abbate
Joe Abbate

Reputation: 1750

The problem with font-family: cursive is that it seems that Chromium (and presumably derived browsers) do not display a "cursive", i.e., handwritten-like, font, which is why I came looking for this question. Aside: Firefox does show a cursive font (at least on my browser). Perhaps the worst part is that Chromium shows a sans-serif, non-italicized font when you specify "cursive", which is obviously not what you want if the purpose is to simulate a handwritten document. So on Chromium (and Firefox) the best solution, short of downloading custom fonts, is to specify font-family: cursive, Times, serif; font-style: italic;.

To check font-family I recommend visiting: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family and clicking on the demo options on your browser(s) of choice.

Upvotes: 0

BenjB
BenjB

Reputation: 165

You can use the following rule:

font-style: italic;

So it would looke like this: 

p.italic {
font-style: italic; 
}
<p>This is normal text.</p>
<p class="italic">This is italic text.</p>

Upvotes: 2

sol
sol

Reputation: 22949

You can use the font-family property.

p {
  font-family: cursive;
}
<p>some text in cursive font</p>

Upvotes: 4

Jorge Altieri
Jorge Altieri

Reputation: 134

This should work...

span {
    font-family: cursive;
}
<span>Cursive text</span>

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42354

You can either use a cursive CSS font or make use of the letter-spacing property, using -1px as the value:

p.cursive {
    letter-spacing: -1px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum placerat ligula mattis semper. Nunc ornare pellentesque arcu, malesuada ullamcorper est cursus at. Duis id nibh ligula. Nam maximus nibh finibus lorem laoreet, vel tincidunt purus ornare. Nulla molestie eu massa et elementum.</p>

<p class="cursive">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum placerat ligula mattis semper. Nunc ornare pellentesque arcu, malesuada ullamcorper est cursus at. Duis id nibh ligula. Nam maximus nibh finibus lorem laoreet, vel tincidunt purus ornare. Nulla molestie eu massa et elementum.</p>

Upvotes: 0

AidanM
AidanM

Reputation: 57

Well, if you're looking to use a cursive font (or any custom font), I recommend using https://cooltext.com/. Go under the "fonts" section at the top of the homepage, and there are different categories that you can choose from. "Cursive" is the one you want, I believe. Click the font you want, and download the .zip file. Extract it and such, and convert it to a .woff file using http://ttf2woff.com/ (trust me, it needs to be in a .woff format for webpages. I've experienced rage and suffering from this...) Hope this helps!

...Or you could just do what everybody else suggested, that's fine too.

Upvotes: 0

Related Questions