What is a web font?
A web font is a type of font used on a website that isn't pre-installed on the user's device. Unlike system fonts, which are stored locally, web fonts are downloaded from a web server when the page loads.
HTML
<section class="demo-section">
<div class="demo-container">
<div class="demo-main">Trust</div>
<div class="demo-sub">Yourself</div>
</div>
</section>
CSS
@font-face {
font-family: 'baby-kruffy';
src: url('baby-kruffy.woff2') format('woff2'),
url('baby-kruffy.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.demo-section {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 6rem 2rem 2rem 2rem;
}
.demo-container {
font-family: baby-kruffy, sans-serif;
}
.demo-main {
position: relative;
font-size: 90px;
color: rgba(186, 255, 74, 0.60);
text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.20), 8px 8px rgba(86, 114, 240, 0.20);
letter-spacing: 4px;
}
.demo-sub {
position: relative;
top: -65px;
font-size: 30px;
color: rgba(255, 255, 255, 0.60);
text-shadow: -4px 0 rgba(219, 73, 69, 0.20), 0 4px rgba(219, 73, 69, 0.40), 4px 0 rgba(219, 73, 69, 0.40), 0 -4px rgba(219, 73, 69, 0.40);
letter-spacing: 2px;
}
Arrow at the bottom
Arrow at the bottom with a utf-8 character
Arrow at the top of a container
Aside
Background color
Blackboard design
Breadcrumbs design
Calendar design
Checkboxes as circular buttons
Checkboxes as toggle switches
Cursor properties
Circular image with a shadow effect
Font Awesome pulled icons
Gallery picture frame with a price ribbon
Google pie chart
Google web fonts
Last child and not last child element
Letter spacing
List items with a Font Awesome icon
Neon text
Neon text with a flickering effect
Notebook paper background
Radio buttons as circular buttons
Radio buttons as rating stars
Remove the glow effect from an input field
Search bar with categories
Track (audio/video subtitles)
Web fonts
Whiteboard design