Creating a custom font with css

Hey guyz in this post i am going to teach u how to embed cool font in your webpage with css. Its very easy and u can manage your custom font with your custom and name and can host the fonts locally or not a cdn (content delivery network) like google. So let dive in code

Live demo Download Script Watch Tutorial

Css

Their is nothing special we are just using a @font-face{} property in css which allow us to create a embed a custom font with a custom name one thing to keep in mind is that a font should be of .woff extension beacuse this is supported by all modern browser. we have created a custom font with @font-face property and used that font in the .p class

<style type="text/css">
	@font-face{
		font-family: 'husain';
		src: url('husain.woff');
	}
	.g{
		font-family: 'husain';
	}
	</style>

html

we have used the .p class in h1 tag and your custom font will be attached to that h1 tag

<h1 class="g">Welcome to hunklessons.blogspot.com</h1>
<h1>Welcome to hunklessons.blogspot.com</h1>