<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fonts</title> <style> @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&family=Poppins:wght@300&display=swap'); h1 { font-family: 'Poppins', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif } p { /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */ font-family: 'Baloo Bhai 2', sans-serif; font-size: 20px; /* font-style:italic; font-weight: 500; */ } h2{ text-align: center; text-transform: uppercase; text-decoration: underline; text-decoration-color: blue;//to change color of underline /* text-decoration-style: dotted; */ text-decoration-thickness: 7px ; /* text-indent: 45px; */ } .lorem{ border: 2px solid red; width: 145px; word-break: break-all; /* text-overflow: ellipsis; overflow: hidden; */ } </style> </head> <body> <div> <!-- https://codepen.io/web-dot-dev/pen/yLojraG --> <h1>Fonts</h1> <h2>about Fonts</h2> <p>This is a video on fonts</p> <p class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos sequi accusamus quas itaque molestias dolorem quisquam quod, adipisci maxime dolore, mollitia illo officia deserunt voluptatem iure qui. Fugit aliquam possimus aperiam commodi eum amet veniam at vel. Necessitatibus asperiores eos amet laborum dolor, ipsum porro!</p> </div> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter