Web Fonts

Developer
Fezzik
Size
3,861 Kb
Views
10,120
  1. Web Fonts Previews
  2. Web Fonts HTML Codes
  3. Web Fonts CSS Codes

How do I make an web fonts?

@font-face:. What is a web fonts? How do you make a web fonts? This script and codes were developed by Fezzik on 25 November 2022, Friday.

Web Fonts Previews
IQ Test

Web Fonts - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Web Fonts</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!DOCTYPE html>
<html>
<head>	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">	<meta name="viewport" content="width=device-width, minimum-scale=1.0">	<title>Web Fonts</title>	<script type="text/javascript" src="//use.typekit.net/iwc3rvi.js"></script>	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,400' rel='stylesheet' type='text/css'>	<link rel="stylesheet" href="style.css">
</head>
<body>	<div class="wrap">	<h1 id="title" class="title">finely crafted code</h1>	<p class="author">By: Guil Hernandez</p>	<p class="intro">	You've probably already heard of <a href="#">CSS preprocessors</a> by now, but haven't quite plucked up the courage to try one because of the learning curve, or maybe because &ldquo;preprocessor&rdquo; just plain sounds intimidating. So let's put those uncertainties at ease and go over what preprocessors are, how they work, and which one you might choose. In this article, we'll discuss the 3 most popular ones: <a href="#">Sass</a>, <a href="#">LESS</a> and <a href="#">Stylus</a>.	</p>	<h2>What's a Preprocessor?</h2>	<p>	Preprocessors compile the CSS code we write in a processed language to the pure CSS syntax we're all used to. If you've recently considered using a CSS preprocessor, there's no better time to dive in with all the options and helpful tools available.	</p>	<p>	Until recently, there was a lot of resistance from developers who argued that preprocessors steered too far from pure CSS, added more layers of complexity and that &ldquo;If it's not broken, don't fix it.&rdquo; But lately, many have realized just how powerful preprocessors can make our CSS.	</p>	<h2>Why Use One?</h2>	<p>	There are various reasons why CSS preprocessors can be a valuable tool in our development process. First, they don't break browser compatibility; LESS, Sass and Stylus are all valid CSS and vice versa. Another advantage is preprocessors make our CSS DRY (Don't Repeat Yourself) by allowing us to create <a href="#">variables</a> from reusable CSS properties, which makes our code more modular and scalable, so our CSS doesn't get out of hand and become difficult to manage&hellip;	</p>	</div>	<script src="js/jquery-1.9.1.min.js"></script>	<script src="js/jquery.fittext.js"></script>	<script type="text/javascript">	$("#title").fitText();	</script>
</body>
</html>
</body>
</html>

Web Fonts - Script Codes CSS Codes

/* --------------------------	Margin Reset
----------------------------- */
body, h1, h2, h3, p {	margin: 0;
}
/* ---------------------------	Web Fonts
----------------------------- */
@font-face { /*** Embedded fonts increase load time, so don't have more than 4 or 5. ***/ font-weight: bold; font-style: normal; font-family: 'DroidSerifBold'; /* You can name the font anything; it is only used within this stylesheet. */ src: url('fonts/DroidSerif-Bold-webfont.eot'); /* Embedded Open Type. Proprietary format for IE. */ src: url('fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'), /* A trick that makes the font work in IE 6-8. */ url('fonts/DroidSerif-Bold-webfont.woff') format('woff'), /* Web Open Font Format. Created by Mozilla & is supported by most browsers including IE9. Loads super-fast. Because its compressed, it uses less bandwidth. */ url('fonts/fonts/DroidSerif-Bold-webfont.ttf') format('truetype'), /* Safari, Android, iLess Display. */ url('fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg'); /* Open source; so if the the font is missing gliffs, you can add them yourself. */
}
/* --------------------------	Icon Fonts
----------------------------- */
@font-face { /* Icon fonts load 14% faster than images and 90% faster than SVG. */	font-family: 'icomoon'; /* Two icons from icomoon.io */	src:url('icons/icomoon.eot');	src:url('icons/icomoon.eot?#iefix') format('embedded-opentype'),	url('icons/icomoon.woff') format('woff'),	url('icons/icomoon.ttf') format('truetype'),	url('icons/icomoon.svg#icomoon') format('svg');
}
/* --------------------------	Page Styles
----------------------------- */
body {	padding: 4.65em 0;	border-top: 8px solid #222;	background: #f9f9f9;	color: #333;	font-size: 1.125em;	font-family: 'Open Sans', sans-serif;	line-height: 1.6;
}
p {	margin: 1.6em 0;	text-align: left;
}
a {	color: #d24c39;
}
.wrap {	position: relative;	margin: 0 auto;	max-width: 58%;
}
.wrap:before {	position: absolute;	top: -31px;	left: 45%;	z-index: 100;	padding: .4em;	border-radius: 50%;	background:#2B9BD4;	color: #FFF;	content: "\e002";	font-size: 1.9em;	font-family: 'icomoon';	line-height: 1;	-webkit-font-smoothing: antialiased; /*** Improves the clarity of the iconfont! */
}
.intro {	margin-top: 3.15em;
}
.title {	position: relative;	padding: .82em 0 0 0;	border-top: 1px solid rgba(51,52,52,.4);	text-align: center;	font-family: "ff-tisa-web-pro", serif;	line-height: 1.33; -webkit-font-feature-settings: "liga", "dlig"; /* This allows common & discretionary ligature in words. */ /* NOTE: Ligatures used to improve text appearance for letters that are too close together. Must embed & use font that supports ligature. */
}
.author {	text-align: center;	text-transform: uppercase;	font-size: 0.778em;
}
h2 {	margin: 1.25em 0 0 0;	color: #2B9BD4;	letter-spacing: -2px;	font-size: 2em;	font-family: 'DroidSerifBold', Georgia, serif;	line-height: 1.1;
}
/* --------------------------	Media Queries
----------------------------- */
@media screen and (max-width: 599px) {	body {	font-size: 1em;	}	.wrap {	max-width: 85%;	}	h2 {	font-size: 1.6em;	}
}
@media screen and (min-width: 980px) {	.wrap {	max-width: 600px;	}
}
Web Fonts - Script Codes
Web Fonts - Script Codes
Home Page Home
Developer Fezzik
Username Fezzik
Uploaded November 25, 2022
Rating 3
Size 3,861 Kb
Views 10,120
Do you need developer help for Web Fonts?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Fezzik (Fezzik) Script Codes
Name
3D Transforms - Part 1
Full-page Animation Project - Page 2
List Properties
3D Transforms - Part 2
Transitions - Part 1
Flexbox - Part 1
Full-page Animation Project - Part 3
Print Stylesheets
Background Properties
Multi-Column Layout
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!