Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to embed fonts in HTML?

I'm trying to figure out a decent solution (especially from the SEO side) for embedding fonts in web pages. So far I have seen the W3C solution, which doesn't even work on Firefox, and this pretty cool solution. The second solution is for titles only. Is there a solution available for full text? I'm tired of the standard fonts for web pages.

Thanks!

like image 957
Dan Rosenstark Avatar asked Oct 20 '08 22:10

Dan Rosenstark


People also ask

How do I embed a font?

Embed fonts in a document or presentation Open the file you want to embed fonts in. On the application (PowerPoint or Word) menu, select Preferences. In the dialog box, under Output and Sharing, select Save. Under Font Embedding, select Embed fonts in the file.

How do I use offline fonts in HTML?

Step2: Choose the Font Whatever you like and download it. Step3: After completing the download unzip the file and save it in your project folder. Step4: In the CSS file write the following code: @font-face { font-family: fontfamily; // you can write the name whatever you want src: url(foldername/font-name.


2 Answers

Things have changed since this question was originally asked and answered. There's been a large amount of work done on getting cross-browser font embedding for body text to work using @font-face embedding.

Paul Irish put together Bulletproof @font-face syntax combining attempts from multiple other people. If you actually go through the entire article (not just the top) it allows a single @font-face statement to cover IE, Firefox, Safari, Opera, Chrome and possibly others. Basically this can feed out OTF, EOT, SVG and WOFF in ways that don't break anything.

Snipped from his article:

@font-face {   font-family: 'Graublau Web';   src: url('GraublauWeb.eot');   src: local('Graublau Web Regular'), local('Graublau Web'),     url("GraublauWeb.woff") format("woff"),     url("GraublauWeb.otf") format("opentype"),     url("GraublauWeb.svg#grablau") format("svg"); } 

Working from that base, Font Squirrel put together a variety of useful tools including the @font-face Generator which allows you to upload a TTF or OTF file and get auto-converted font files for the other types, along with pre-built CSS and a demo HTML page. Font Squirrel also has Hundreds of @font-face kits.

Soma Design also put together the FontFriend Bookmarklet, which redefines fonts on a page on the fly so you can try things out. It includes drag-and-drop @font-face support in FireFox 3.6+.

More recently, Google has started to provide the Google Web Fonts, an assortment of fonts available under an Open Source license and served from Google's servers.

License Restrictions

Finally, WebFonts.info has put together a nice wiki'd list of Fonts available for @font-face embedding based on licenses. It doesn't claim to be an exhaustive list, but fonts on it should be available (possibly with conditions such as an attribution in the CSS file) for embedding/linking. It's important to read the licenses, because there are some limitations that aren't pushed forward obviously on the font downloads.

like image 105
fencepost Avatar answered Sep 28 '22 01:09

fencepost


Try Facetype.js, you convert your .TTF font into a Javascript file. Full SEO compatible, supports FF, IE6 and Safari and degrades gracefully on other browsers.

like image 44
Martin Meixger Avatar answered Sep 28 '22 01:09

Martin Meixger