By vaske


2008-09-20 11:26:52 8 Comments

Is there a way to add some custom font on website without using images, Flash or some other graphics?

For example, I was working on some wedding website, and I was finding a lot of nice fonts for that subject, but I can't find the right way to add that font on the server, and how do I include that font with CSS into the HTML? Is this possible to do without graphics?

21 comments

@Michał Pękała 2010-06-28 07:08:22

You can add some fonts via Google Web Fonts.

Technically, the fonts are hosted at Google and you link them in the HTML header. Then, you can use them freely in CSS with @font-face (read about it).

For example:

In the <head> section:

 <link href=' //fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Then in CSS:

h1 { font-family: 'Droid Sans', arial, serif; }

The solution seems quite reliable (even Smashing Magazine uses it for an article title.). There are, however, not so many fonts available so far in Google Font Directory.

@vsingh 2015-04-01 15:07:15

In July 2014, google has expanded the fonts and included Google Noto fonts which support most languages google.com/get/noto/# . Abobe has supported this open font initiative supporting all languages blog.typekit.com/2014/07/15/introducing-source-han-sans

@Mahdi Jazini 2018-09-04 07:38:43

it seems (Google web fonts) doesn't support .eot and .woff and .svg versions of fonts. it just supports .ttf version of fonts!

@Javier Cadiz 2014-03-30 01:00:32

The way to go is using the @font-face CSS declaration which allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.

Take a look at the following table:

enter image description here

As you can see, there are several formats that you need to know about mainly due to cross-browser compatibility. The scenario in mobile devices isn't much different.

Solutions:

1 - Full browser compatibility

This is the method with the deepest support possible right now:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

2 - Most of the browser

Things are shifting heavily toward WOFF though, so you can probably get away with:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Only the latest browsers

Or even just WOFF.
You then use it like this:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

References and Further reading:

That's mainly what you need to know about implementing this feature. If you want to research more on the subject I'll encourage to take a look at the following resources. Most of what I put here is extracted from the following

@Jacob Stamm 2016-10-08 03:55:48

The extremely handy Font Squirrel tool can generate the CSS needed for full-browser support. It even lets you upload the font as any one of these formats, converts it to all the other formats, and lets you download them all. It's a life saver when it comes to custom fonts.

@Gherman 2016-11-19 17:15:26

What does svgFontName stand for? Should I change it to my font family name or leave it as is?

@Abhijeet Kumar 2017-11-11 16:11:09

Just simply provide the link to actual font like this and you will be good to go

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>

@Tim Erickson 2018-05-25 21:42:44

A good simple alternative. And you're sure to have the rights to use it. See developers.google.com/fonts/docs/getting_started

@saadeez 2016-02-11 05:37:36

If you have a file of your font, then you will need to add more formats of that font for other browsers.

For this purpose I use font generator like Fontsquirrel it provides all the font formats & its @font-face CSS, you will only need to just drag & drop it into your CSS file.

@hangy 2008-09-20 11:35:52

This could be done via CSS:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

It is supported for all of the regular browsers if you use TrueType-Fonts (TTF) or the Web Open Font Format (WOFF).

@hangy 2008-09-20 11:48:12

Note: Looks like the font-face tag also is a part of CSS3 and not just CSS2. See css3.info/webkit-has-web-fonts-support for more information.

@Casper 2008-09-20 13:21:21

Both Internet Explorer and Firefox re NOT based on Webkit, so it's quite a useless solution in my opinion.

@e-satis 2008-09-22 09:14:38

It's not useless since it's standard : the more you implement it, the more it will likely be implemented by browsers. That does not mean you should not find another way to compensate, but using this as a complement seems good to me.

@Ms2ger 2009-02-26 15:20:44

Firefox 3.1 does support @font-face, though.

@Matt Ball 2010-09-21 15:00:29

@brendanjerwin: updated version of your link - brendanjerwin.com/development/web/2009/03/03/…

@harihb 2011-05-04 10:09:56

This works :) I tried it in Firefox 4.0 and I am getting that font. Thanks!

@Luis Alvarado 2011-05-27 16:56:22

Thank you so much. It is easy to implement.

@Loren 2012-09-25 00:58:44

@brendanjerwin: updated the updated version of your link -brendanjerwin.com/blog/2009/03/03/embedding-fonts

@Christos Hayward 2012-10-10 18:37:47

@e-satis: "It's not useless since it's standard : the more you implement it, the more it will likely be implemented by browsers." We are facing something of a large-scale (philosopher's) "prisoner's dilemma" here. If the web as a whole adopts a proposed standard, it is more likely that browsers comply. However the individual best optimization for inconsistent support is often not to just do what it would be best if everyone did, and that's even without taking into account "embrace and extend" and like menaces.

@Bajrang 2013-04-09 10:06:04

i have added same but cant adding the font ? or may have i added wrong way ?

@B H 2013-11-22 17:12:38

Couldn't we dispense with the broken links and just put the pertinent info here? Create the .eot file by downloading MS Web Embedding Font Tool (WEFT) @font-face { font-family: "Vineta BT"; src: url(MyServer/MyFontLocation/VINETAB0.eot); }

@Adrien Be 2014-03-27 13:07:25

see the bulletproof standard @font-face syntax fontspring.com/blog/fixing-ie9-font-face-problems

@jessica 2015-12-17 22:43:09

Hey guys, guess what? It's now almost 2016! It's now supported widely! Yay! Glad, I found this answer this late. Haha.

@Black 2016-01-25 11:53:32

How to link on a local path?

@Mr Lister 2016-06-15 18:01:45

@EdwardBlack Just leave out the //.

@Wilf 2014-02-22 19:18:24

It is also possible to use WOFF fonts - example here

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }

@BiAiB 2012-09-12 15:30:55

If by non standard font, you mean custom font of a standard format, here's how I do it, and it works for all browsers I've checked so far:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

so you'll just need both the ttf and eot fonts. Some tools available online can make the conversion.

But if you want to attach font in a non standard format (bitmaps etc), I can't help you.

@Wilf 2014-02-22 19:15:09

Online tool example: kirsle.net/wizards/ttf2eot.cgi Offline tool example: code.google.com/p/ttf2eot/wiki/Demo - it should also be possible to use WOFF fonts.

@Andrei Krasutski 2017-09-29 18:05:49

Offline tool example github.com/fontello/ttf2woff

@Blair 2010-04-06 05:06:59

See the article 50 Useful Design Tools For Beautiful Web Typography for alternative methods.

I have only used Cufon. I have found it reliable and very easy to use, so I've stuck with it.

@Thomas 2009-05-11 16:59:25

Typeface.js and Cufon are two other interesting options. They are JavaScript components that render special font data in JSON format (which you can convert from TrueType or OpenType formats on their web sites) via the new <canvas> element in all newer browsers except Internet Explorer and via VML in Internet Explorer.

The main problem with both (as of now) is that selecting text does not work or at least works only quite awkwardly.

Still, it is very nice for headlines. Body text... I don't know.

And it's surprisingly fast.

@Zack 2009-12-20 14:40:58

Another interesting option is typekit.com Similar concept.

@brendanjerwin 2009-02-25 22:56:00

The article Font-face in IE: Making Web Fonts Work says it works with all three major browsers.

Here is a sample I got working: http://brendanjerwin.com/test_font.html

More discussion is in Embedding Fonts.

@Kent Fredric 2008-09-20 11:52:07

I did a bit of research and dug up Dynamic Text Replacement (published 2004-06-15).

This technique uses images, but it appears to be "hands free". You write your text, and you let a few automated scripts do automated find-and-replace on the page for you on the fly.

It has some limitations, but it is probably one of the easier choices (and more browser compatible) than all the rest I've seen.

@mattlant 2008-09-20 11:47:23

If you use ASP.NET, it's really easy to generate image based fonts without actually having to install (as in adding to the installed font base) fonts on the server by using:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

and then drawing with that font onto a Graphics.

@e-satis 2008-09-22 09:19:07

well, yes... And you user can forget about copying and pasting. And zooming too, in old browsers. I don't even talk about bandwidth issues !

@mattlant 2008-09-22 12:36:27

Yeah, ok, and the question specified that it was going to be using it for content text? No it didnt, it was a general question, and this was a general answer. Small snippets of text, headers, etc, dont take up lots of bandwidth. Sheesh, get a grip!

@TraumaPony 2008-09-20 11:40:26

Is there a way to add some custom font on website without using ... Flash ?

Sure, use Silverlight.

@mattlant 2008-09-20 16:51:36

only problem with this is distribution rights, as you would need that to use the font :(

@Wilf 2014-02-22 19:06:02

It would be nice if solutions did not require Microsoft products..

@Matt 2008-09-20 11:35:01

I've found that the easiest way to have non-standard fonts on a website is to use sIFR

It does involve the use of a Flash object that contains the font, but it degrades nicely to standard text / font if Flash is not installed.

The style is set in your CSS, and JavaScript sets up the Flash replacement for your text.

Edit: (I still recommend using images for non-standard fonts as sIFR adds time to a project and can require maintenance).

@e-satis 2008-09-22 09:17:35

What a terrible idea ! I have flash in my browser but flashblock too. On that website, my browser display an horrible defaced page. Flash should stay something that you use for big animations or movies. Too much flash is wery anoying and visualy, my my...

@Sasha Chedygov 2010-04-15 03:14:02

@e-satis: How so? Personally, I never notice the difference between a page that uses sIFR and one that doesn't, aside from the subtle text rendering differences. I think it's a great idea, honestly, although @font-face is much better where supported.

@Derek Adair 2010-07-09 16:00:01

"Edit: (I still recommend using images for non-standard fonts as sIFR adds time to a project and can require maintenance)." very well said. sIFR is a really cool technique but it seems to require a lot to get the EXACT look you want. If you have the time to learn and master this technique I'd highly recommend it. But if you are looking for a quick and easy font-replacement technique I'd use image replacement or even the @font-face css property

@Casper 2008-09-20 11:33:07

Or you could try sIFR. I know it uses Flash, but only if available. If Flash isn't available, it displays the original text in its original (CSS) font.

@Cogwheel 2010-06-18 21:10:26

Monotype recently released a lot of their fonts along with a new system for using them on your web pages: http://www.webfonts.fonts.com/

@bakkal 2010-05-31 03:35:45

Typeface.js JavaScript Way:

With typeface.js you can embed custom fonts in your web pages so you don't have to render text to images

Instead of creating images or using flash just to show your site's graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

http://typeface.neocracy.org/

@zobier 2008-09-20 11:43:39

Safari and Internet Explorer both support the CSS @font-face rule, however they support two different embedded font types. Firefox is planning to support the same type as Apple some time soon. SVG can embed fonts but isn't that widely supported yet (without a plugin).

I think the most portable solution I've seen is to use a JavaScript function to replace headings etc. with an image generated and cached on the server with your font of choice -- that way you simply update the text and don't have to stuff around in Photoshop.

@hangy 2008-09-20 11:50:37

This does not have to be done with JavaScript. I know that a lot of people like to use JavaScript for quite a few stuff nowadays, but a standard CSS technique may be more appropriate here. See sitepoint.com/article/header-images-css-xhtml

@zobier 2008-09-22 05:02:37

I'm sorry if there's confusion, the technique refers not to the method of image replacement which, as you say, can be CSS. It is about generating graphics representing a given string in a particular font/style, on the fly, at the server -- obviating the need to create these manually.

@Steve Moyer 2008-09-20 11:39:19

The technique that the W3C has recommended for do this is called "embedding" and is well described by the three articles here: Embedding Fonts. In my limited experiments, I have found this process error-prone and have had limited success in making it function in a multi-browser environment.

@James Muscat 2008-09-20 11:39:12

It looks like it only works in Internet Explorer, but a quick Google search for "html embed fonts" yields http://www.spoono.com/html/tutorials/tutorial.php?id=19

If you want to stay platform-agnostic (and you should!) you'll have to use images, or else just use a standard font.

@Ed Brown 2008-09-20 11:30:22

I'm afraid graphics is your only option in this case.

@Zack 2009-12-20 15:02:44

With JavaScript, CSS3, and the way the internet is going, There are several other options. TypeKit works all the way to back IE6

Related Questions

Sponsored Content

12 Answered Questions

[SOLVED] Should I use px or rem value units in my CSS?

18 Answered Questions

[SOLVED] Center image horizontally within a div

  • 2012-06-12 00:40:57
  • Jacob Windsor
  • 726451 View
  • 357 Score
  • 18 Answer
  • Tags:   html css

13 Answered Questions

[SOLVED] CSS 100% height with padding/margin

  • 2009-01-27 23:28:18
  • Toji
  • 318717 View
  • 791 Score
  • 13 Answer
  • Tags:   css

7 Answered Questions

[SOLVED] How to add multiple font files for the same font?

9 Answered Questions

[SOLVED] Can I write a CSS selector selecting elements NOT having a certain class or attribute?

30 Answered Questions

[SOLVED] Convert HTML + CSS to PDF with PHP?

66 Answered Questions

[SOLVED] Why not use tables for layout in HTML?

  • 2008-09-17 13:19:09
  • Benno Richters
  • 449600 View
  • 665 Score
  • 66 Answer
  • Tags:   html css

6 Answered Questions

[SOLVED] How do I add custom fonts?

  • 2014-02-13 08:10:58
  • Val Do
  • 2563 View
  • 2 Score
  • 6 Answer
  • Tags:   html css

15 Answered Questions

[SOLVED] Managing CSS Explosion

  • 2010-02-12 16:03:34
  • JasCav
  • 43993 View
  • 681 Score
  • 15 Answer
  • Tags:   css organization

7 Answered Questions

[SOLVED] Using custom fonts using CSS?

  • 2012-08-27 14:28:31
  • Radicate
  • 348441 View
  • 165 Score
  • 7 Answer
  • Tags:   css font-face

Sponsored Content