Webfont examples

Ubuntu Regular download example

The Ubuntu Font Family is a sans-serif typeface family with an intended coverage of thirteen fonts. The development is being funded by Canonical on behalf the wider Free Software community and the Ubuntu project. The technical font design work and implementation is being undertaken by Dalton Maag.

Converter settings
Family support
Autohint font
Add local() rule
Base64 encode
Formats	TTF, EOT, WOFF

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Transfonter demo</title>
	<link href="stylesheet.css" rel="stylesheet">
	<style>
		/*
		http://meyerweb.com/eric/tools/css/reset/
		v2.0 | 20110126
		License: none (public domain)
		*/
		html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed,
		figure, figcaption, footer, header, hgroup,
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure,
		footer, header, hgroup, menu, nav, section {
			display: block;
		}
		body {
			line-height: 1;
		}
		ol, ul {
			list-style: none;
		}
		blockquote, q {
			quotes: none;
		}
		blockquote:before, blockquote:after,
		q:before, q:after {
			content: '';
			content: none;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		/* common styles */
		body {
			color: #000;
		}
		.page {
			background: #fff;
			overflow: hidden;
		}
		.font-container {
			overflow-x: auto;
			overflow-y: hidden;
			line-height: 1.3;
			white-space: nowrap;
			padding-bottom: 5px;
		}
		h1 {
			position: relative;
			background: #444;
			font-size: 32px;
			color: #fff;
			padding: 10px 20px;
			margin: 0 0 10px 0;
		}
		.letters {
			font-size: 25px;
			margin-bottom: 20px;
		}
		.s10:before {
			content: '10px';
		}
		.s11:before {
			content: '11px';
		}
		.s12:before {
			content: '12px';
		}
		.s14:before {
			content: '14px';
		}
		.s18:before {
			content: '18px';
		}
		.s24:before {
			content: '24px';
		}
		.s30:before {
			content: '30px';
		}
		.s36:before {
			content: '36px';
		}
		.s48:before {
			content: '48px';
		}
		.s60:before {
			content: '60px';
		}
		.s72:before {
			content: '72px';
		}
		.s10:before, .s11:before, .s12:before, .s14:before,
		.s18:before, .s24:before, .s30:before, .s36:before,
		.s48:before, .s60:before, .s72:before {
			font-family: Arial, sans-serif;
			font-size: 10px;
			font-weight: normal;
			font-style: normal;
			color: #999;
			padding-right: 6px;
		}
		/* fonts demo styles */
		.demo-0 {
			font-family: 'Ubuntu';
			font-weight: normal;
			font-style: normal;
		}
	</style>
</head>
<body>
<div class="page">
	<div class="demo-0">
		<h1>Ubuntu</h1>
		<div class="font-container">
			<p class="letters">
				abcdefghijklmnopqrstuvwxyz <br />
				ABCDEFGHIJKLMNOPQRSTUVWXYZ <br />				0123456789.:,;()*!?'@#<>$%&^+-=~
			</p>
			<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
		</div>
	</div>
</div>
</body>
</html>

/* This stylesheet generated by Transfonter (http://transfonter.org) */

@font-face {
	font-family: 'Ubuntu';
	src: url('Ubuntu.eot');
	src: url('Ubuntu.eot?#iefix') format('embedded-opentype'),
		url('Ubuntu.woff') format('woff'),
		url('Ubuntu.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

OpenSans Bold download example

Open Sans is a sans-serif typeface designed by Steve Matteson and commissioned by Google. According to Google, it was developed with an "upright stress, open forms and a neutral, yet friendly appearance" and is "optimized for legibility across print, web, and mobile interfaces."

Converter settings
Family support
Autohint font
Add local() rule
Base64 encode
Formats	TTF, EOT, WOFF, WOFF2

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Transfonter demo</title>
	<link href="stylesheet.css" rel="stylesheet">
	<style>
		/*
		http://meyerweb.com/eric/tools/css/reset/
		v2.0 | 20110126
		License: none (public domain)
		*/
		html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed,
		figure, figcaption, footer, header, hgroup,
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure,
		footer, header, hgroup, menu, nav, section {
			display: block;
		}
		body {
			line-height: 1;
		}
		ol, ul {
			list-style: none;
		}
		blockquote, q {
			quotes: none;
		}
		blockquote:before, blockquote:after,
		q:before, q:after {
			content: '';
			content: none;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		/* common styles */
		body {
			color: #000;
		}
		.page {
			background: #fff;
			overflow: hidden;
		}
		.font-container {
			overflow-x: auto;
			overflow-y: hidden;
			line-height: 1.3;
			white-space: nowrap;
			padding-bottom: 5px;
		}
		h1 {
			position: relative;
			background: #444;
			font-size: 32px;
			color: #fff;
			padding: 10px 20px;
			margin: 0 0 10px 0;
		}
		.letters {
			font-size: 25px;
			margin-bottom: 20px;
		}
		.s10:before {
			content: '10px';
		}
		.s11:before {
			content: '11px';
		}
		.s12:before {
			content: '12px';
		}
		.s14:before {
			content: '14px';
		}
		.s18:before {
			content: '18px';
		}
		.s24:before {
			content: '24px';
		}
		.s30:before {
			content: '30px';
		}
		.s36:before {
			content: '36px';
		}
		.s48:before {
			content: '48px';
		}
		.s60:before {
			content: '60px';
		}
		.s72:before {
			content: '72px';
		}
		.s10:before, .s11:before, .s12:before, .s14:before,
		.s18:before, .s24:before, .s30:before, .s36:before,
		.s48:before, .s60:before, .s72:before {
			font-family: Arial, sans-serif;
			font-size: 10px;
			font-weight: normal;
			font-style: normal;
			color: #999;
			padding-right: 6px;
		}
		/* fonts demo styles */
		.demo-0 {
			font-family: 'Open Sans';
			font-weight: bold;
			font-style: normal;
		}
	</style>
</head>
<body>
<div class="page">
	<div class="demo-0">
		<h1>Open Sans Bold</h1>
		<div class="font-container">
			<p class="letters">
				abcdefghijklmnopqrstuvwxyz <br />
				ABCDEFGHIJKLMNOPQRSTUVWXYZ <br />				0123456789.:,;()*!?'@#<>$%&^+-=~
			</p>
			<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
		</div>
	</div>
</div>
</body>
</html>

/* This stylesheet generated by Transfonter (http://transfonter.org) */

@font-face {
	font-family: 'Open Sans';
	src: url('OpenSans-Bold.eot');
	src: local('Open Sans Bold'), local('OpenSans-Bold'),
		url('OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
		url('OpenSans-Bold.woff2') format('woff2'),
		url('OpenSans-Bold.woff') format('woff'),
		url('OpenSans-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

RobotoSlab Light download example

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

This is the Roboto Slab family, which can be used alongside the normal Roboto family and the Roboto Condensed family.

Converter settings
Family support
Autohint font
Add local() rule
Base64 encode
Formats	TTF, EOT, WOFF, SVG

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Transfonter demo</title>
	<link href="stylesheet.css" rel="stylesheet">
	<style>
		/*
		http://meyerweb.com/eric/tools/css/reset/
		v2.0 | 20110126
		License: none (public domain)
		*/
		html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed,
		figure, figcaption, footer, header, hgroup,
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure,
		footer, header, hgroup, menu, nav, section {
			display: block;
		}
		body {
			line-height: 1;
		}
		ol, ul {
			list-style: none;
		}
		blockquote, q {
			quotes: none;
		}
		blockquote:before, blockquote:after,
		q:before, q:after {
			content: '';
			content: none;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		/* common styles */
		body {
			color: #000;
		}
		.page {
			background: #fff;
			overflow: hidden;
		}
		.font-container {
			overflow-x: auto;
			overflow-y: hidden;
			line-height: 1.3;
			white-space: nowrap;
			padding-bottom: 5px;
		}
		h1 {
			position: relative;
			background: #444;
			font-size: 32px;
			color: #fff;
			padding: 10px 20px;
			margin: 0 0 10px 0;
		}
		.letters {
			font-size: 25px;
			margin-bottom: 20px;
		}
		.s10:before {
			content: '10px';
		}
		.s11:before {
			content: '11px';
		}
		.s12:before {
			content: '12px';
		}
		.s14:before {
			content: '14px';
		}
		.s18:before {
			content: '18px';
		}
		.s24:before {
			content: '24px';
		}
		.s30:before {
			content: '30px';
		}
		.s36:before {
			content: '36px';
		}
		.s48:before {
			content: '48px';
		}
		.s60:before {
			content: '60px';
		}
		.s72:before {
			content: '72px';
		}
		.s10:before, .s11:before, .s12:before, .s14:before,
		.s18:before, .s24:before, .s30:before, .s36:before,
		.s48:before, .s60:before, .s72:before {
			font-family: Arial, sans-serif;
			font-size: 10px;
			font-weight: normal;
			font-style: normal;
			color: #999;
			padding-right: 6px;
		}
		/* fonts demo styles */
		.demo-0 {
			font-family: 'Roboto Slab';
			font-weight: 300;
			font-style: normal;
		}
	</style>
</head>
<body>
<div class="page">
	<div class="demo-0">
		<h1>Roboto Slab Light</h1>
		<div class="font-container">
			<p class="letters">
				abcdefghijklmnopqrstuvwxyz <br />
				ABCDEFGHIJKLMNOPQRSTUVWXYZ <br />				0123456789.:,;()*!?'@#<>$%&^+-=~
			</p>
			<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
		</div>
	</div>
</div>
</body>
</html>

/* This stylesheet generated by Transfonter (http://transfonter.org) */

@font-face {
	font-family: 'Roboto Slab';
	src: url('hinted-RobotoSlab-Light.eot');
	src: url('hinted-RobotoSlab-Light.eot?#iefix') format('embedded-opentype'),
		url('hinted-RobotoSlab-Light.woff') format('woff'),
		url('hinted-RobotoSlab-Light.ttf') format('truetype'),
		url('hinted-RobotoSlab-Light.svg#RobotoSlab-Light') format('svg');
	font-weight: 300;
	font-style: normal;
}

Lobster download example

The Lobster font took a different approach. The new Open Type fonts give us the possibility to have multiple versions of each letter, and that's exactly what we are doing: Instead of compromising the design of our letters to force connections, we do what lettering artist do. We draw many versions of each letter and a lot of different letter-pairs (aka "ligatures") so we always use the best possible variation of each letter depending of the context of the letter inside each word. All this happens automatically in any browser that supports ligatures.

Converter settings
Family support
Autohint font
Add local() rule
Base64 encode
Formats	TTF, EOT

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Transfonter demo</title>
	<link href="stylesheet.css" rel="stylesheet">
	<style>
		/*
		http://meyerweb.com/eric/tools/css/reset/
		v2.0 | 20110126
		License: none (public domain)
		*/
		html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed,
		figure, figcaption, footer, header, hgroup,
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure,
		footer, header, hgroup, menu, nav, section {
			display: block;
		}
		body {
			line-height: 1;
		}
		ol, ul {
			list-style: none;
		}
		blockquote, q {
			quotes: none;
		}
		blockquote:before, blockquote:after,
		q:before, q:after {
			content: '';
			content: none;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		/* common styles */
		body {
			color: #000;
		}
		.page {
			background: #fff;
			overflow: hidden;
		}
		.font-container {
			overflow-x: auto;
			overflow-y: hidden;
			line-height: 1.3;
			white-space: nowrap;
			padding-bottom: 5px;
		}
		h1 {
			position: relative;
			background: #444;
			font-size: 32px;
			color: #fff;
			padding: 10px 20px;
			margin: 0 0 10px 0;
		}
		.letters {
			font-size: 25px;
			margin-bottom: 20px;
		}
		.s10:before {
			content: '10px';
		}
		.s11:before {
			content: '11px';
		}
		.s12:before {
			content: '12px';
		}
		.s14:before {
			content: '14px';
		}
		.s18:before {
			content: '18px';
		}
		.s24:before {
			content: '24px';
		}
		.s30:before {
			content: '30px';
		}
		.s36:before {
			content: '36px';
		}
		.s48:before {
			content: '48px';
		}
		.s60:before {
			content: '60px';
		}
		.s72:before {
			content: '72px';
		}
		.s10:before, .s11:before, .s12:before, .s14:before,
		.s18:before, .s24:before, .s30:before, .s36:before,
		.s48:before, .s60:before, .s72:before {
			font-family: Arial, sans-serif;
			font-size: 10px;
			font-weight: normal;
			font-style: normal;
			color: #999;
			padding-right: 6px;
		}
		/* fonts demo styles */
		.demo-0 {
			font-family: 'Lobster';
			font-weight: normal;
			font-style: normal;
		}
	</style>
</head>
<body>
<div class="page">
	<div class="demo-0">
		<h1>Lobster</h1>
		<div class="font-container">
			<p class="letters">
				abcdefghijklmnopqrstuvwxyz <br />
				ABCDEFGHIJKLMNOPQRSTUVWXYZ <br />				0123456789.:,;()*!?'@#<>$%&^+-=~
			</p>
			<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
			<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
		</div>
	</div>
</div>
</body>
</html>

/* This stylesheet generated by Transfonter (http://transfonter.org) */

@font-face {
	font-family: 'Lobster';
	src: url('Lobster.eot');
	src: url('Lobster.eot?#iefix') format('embedded-opentype'),
		url('Lobster.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}