Cursive font HTML
In this article, we will see about how to make the cursive font in HTML. To make cursive text, you should use the CSS font-family property and give some value. You can easily create cursive text using google fonts
Step-by-step Guide for Cursive Font
- Go to the “Google font” website.
- Select “Cedarville Cursive” or “Dancing Script” cursive google font.
- Then choose your font style and click the “plus” button on the right.
- Copy the <script> code and paste it in your HTML <head>.
- And paste the CSS style code in the tag where you want to set the cursive font.
Example Code
<html>
<head>
<title>Cursive Font</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet"></head>
<style type="text/css">
p{
font-family: 'Dancing Script', cursive;
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>Output:
- In the above HTML code, we have a p tag with some text.
- I want to set a cursive font for paragraph text. So, I selected “Dancing Script” font from google font and pasted the <script> code in <head>
- Then I pasted the CSS code of the Dancing Script font in the <p> tag
- See the above output, the paragraph text is converted into cursive font successfully.
Conclusion
You can also create cursive text without using google font using the font family value “Segoe Script”, “Lucida Handwriting”, “Edwardian Script” without linking any <script>. But if you use it on the website, it will be displayed only if the font is available on the user’s device, otherwise, the default font will be displayed. So if you use the Google font method, it will show up even if your user device doesn’t have the font
