How to add some non-standard font to a website

Question

Is there a way to add some custom font on a website without using images  Flash or some other graphics   For example  I was working on a wedding website  and I found 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

User · Answer

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

User · Answer

This could be done via CSS   lt style type  quot text css quot  gt   font-face       font-family   quot My Custom Font quot       src  url http   www example org mycustomfont ttf  format  quot truetype quot      p customfont        font-family   quot My Custom Font quot   Verdana  Tahoma     lt  style gt   lt p class  quot customfont quot  gt Hello world  lt  p gt   It is supported for all of the regular browsers if you use TrueType-Fonts  TTF   the Web Open Font Format  WOFF  or Embedded Opentype  EOT

User · Answer

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

User · Answer

Just simply provide the link to actual font like this and you will be good to go   lt  DOCTYPE html gt   lt html gt   lt head gt   lt link href  https   fonts googleapis com css family Montserrat    rel  stylesheet  gt   lt style gt  body   font-family   Montserrat  font-size  22px     lt  style gt   lt  head gt   lt body gt    lt h1 gt Montserrat lt  h1 gt   lt p gt Lorem ipsum dolor sit amet  consectetuer adipiscing elit  lt  p gt     lt  body gt   lt  html gt

User · Answer

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

User · Answer

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  amp  its  font-face CSS  you will only need to just drag  amp  drop it into your CSS file

User · Answer

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      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   Using Font Face  Very recommended  Bulletproof  font-face syntax Can i use  font-face web fonts   How to archive Cross-Browser  font-face support  font-face at the CSS Mozilla Developer Network

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt canvas  element in all newer browsers except Internet nbsp Explorer and via VML in Internet nbsp 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

User · Answer

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  lt head gt  section     lt link href   http   fonts googleapis com css family Droid Sans  rel  stylesheet  type  text css  gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

font-face   font-family   quot CustomFont quot   src  url  quot CustomFont eot quot    src  url  quot CustomFont woff quot   format  quot woff quot    url  quot CustomFont otf quot   format  quot opentype quot    url  quot CustomFont svg filename quot   format  quot svg quot

[html] How to add some non-standard font to a website?

Examples related to html

Examples related to css

Examples related to fonts

Examples related to font-face