How to use custom fonts in HTML

This is intended to be just a simple example on how to use custom fonts in your website.

First of all you have to download the desired font file and here is a short list of the most famous repositories:

After you downloaded the zip you will find one or more different files of the same font…what we need is the .woff (Web Open Font Format) format. If the zip doesn’t contain this file you can use an online converter like convert.io :

Then upload your woff file to the server. Below you can find an example on how to import and use it:

<html>
	<head>
		<style>
			@font-face {
			  font-family: MyFont;
			  src: url(path_to_woff/MyFont.woff);
			}
			
			body{
				font-family: MyFont;
			}
		</style>
	</head>
	<body>
		Hello world!
	</body>
</html>



This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.