Skip to content

Edoardo Vignati 👨🏻‍💻

› Always looking for awesome things

Menu
  • Studies
  • Publications
  • Skills
  • Portfolio
  • Projects
  • Career
  • Blog
  • 🇮🇹 Servizi
Menu

How to use custom fonts in HTML

Posted on 01/12/202001/12/2020 by Edoardo

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:

  • www.dafont.com
  • www.dafontfree.net
  • www.1001fonts.com
  • www.fontsquirrel.com
  • www.urbanfonts.com

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 :

  • TTF to WOFF
  • OTF to WOFF

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>

Buy Me A Coffee


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

Leave a Reply Cancel 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.

© 2025 Edoardo Vignati 👨🏻‍💻 | Powered by Minimalist Blog WordPress Theme