How do I install a custom font on an HTML site

Question

I am not using flash or php - and I have been asked to add a custom font to a simple HTML layout   KG June Bug   I have it downloaded locally - is there a simple CSS trick to accomplish this

User · Answer

For the best possible browser support  your CSS code should look like this     font-face     font-family   MyWebFont     src  url  webfont eot       IE9 Compat Modes      src  url  webfont eot  iefix   format  embedded-opentype       IE6-IE8           url  webfont woff2   format  woff2       Super Modern Browsers           url  webfont woff   format  woff       Pretty Modern Browsers           url  webfont ttf    format  truetype       Safari  Android  iOS           url  webfont svg svgFontName   format  svg       Legacy iOS       body     font-family   MyWebFont   Fallback  sans-serif      For more info  see the article Using  font-face at CSS-tricks com

User · Answer

You can use  font-face in most modern browsers   Here s some articles on how it works    http   webdesignerwall com general font-face-solutions-suggestions http   webdesignerwall com tutorials css3-font-face-design-guide   Here is a good syntax for adding the font to your app    http   www fontspring com blog further-hardening-of-the-bulletproof-syntax   Here are a couple of places to convert fonts for use with  font-face     http   www fontsquirrel com fontface generator http   fontface codeandmore com  http   www font2web com    Also cufon will work if you don t want to use font-face  and it has good documentation on the web site    http   cufon shoqolate com generate

User · Answer

Yes  you can use the CSS feature named  font-face  It has only been officially approved in CSS3  but been proposed and implemented in CSS2 and has been supported in IE for quite a long time   You declare it in the CSS like this     font-face   font-family  Delicious  src  url  Delicious-Roman otf         font-face   font-family  Delicious  font-weight  bold  src  url  Delicious-Bold otf       Then  you can just reference it like the other standard fonts    h3   font-family  Delicious  sans-serif      So  in this case    lt html gt      lt head gt       lt style gt         font-face   font-family  JuneBug  src  url  JUNEBUG TTF             h1            font-family  JuneBug              lt  style gt      lt  head gt      lt body gt         lt h1 gt Hey  June lt  h1 gt      lt  body gt   lt  html gt    And you just need to put the JUNEBUG TFF in the same location as the html file   I downloaded the font from the dafont com website   http   www dafont com junebug font

User · Answer

If you are using an external style sheet  the code could look something like this    font-face   font-family  Junebug  src  url  Junebug ttf        junebug   font-family  Junebug  font-size  4 2em      And should be saved in a separate  css file  eg styles css   If your  css file is in a location separate from the page code  the actual font file should have the same path as the  css file  NOT the  html or  php web page file  Then the web page needs something like    lt link rel  stylesheet  href  css styles css  gt    in the  lt head gt  section of your html page  In this example  the font file should be located in the css folder along with the stylesheet  After this  simply add the class  junebug  inside any tag in your html to use Junebug font in that element   If you re putting the css in the actual web page  add the style tag in the head of the html like    lt style gt       font-face   font-family  Junebug  src  url  Junebug ttf        lt  style gt    And the actual element style can either be included in the above  lt style gt  and called per element by class or id  or you can just declare the style inline with the element  By element I mean  lt div gt    lt p gt    lt h1 gt  or any other element within the html that needs to use the Junebug font  With both of these options  the font file  Junebug ttf  should be located in the same path as the html page  Of these two options  the best practice would look like    lt style gt       font-face   font-family  Junebug  src  url  Junebug ttf            junebug   font-family  Junebug  font-size  4 2em     lt  style gt    and   lt h1 class  junebug  gt This is Junebug lt  h1 gt    And the least acceptable way would be    lt style gt       font-face   font-family  Junebug  src  url  Junebug ttf        lt  style gt    and   lt h1 style  font-family  Junebug   gt This is Junebug lt  h1 gt    The reason it s not good to use inline styles is best practice dictates that styles should be kept all in one place so editing is practical  This is also the main reason that I recommend using the very first option of using external style sheets  I hope this helps

User · Answer

Try this   x000D   x000D   font-face     x000D      src  url fonts Market vilis ttf  format  truetype    x000D    x000D  div FontMarket    x000D      font-family   Market Deco  x000D    x000D    lt div class  FontMarket  gt KhonKaen Market lt  div gt  x000D   x000D   x000D    vilis org

User · Answer

there is a simple way to do this  in the html file add    lt link rel  stylesheet  href  fonts vermin vibes ttf    gt    Note  you put the name of  ttf file you have  then go to to your css file and add   h1       color  blue      font-family  vermin vibes      Note  you put the font family name of the font you have   Note  do not write the font-family name as your font ttf name example  if your font ttf name is   vermin vibes ttf  your font-family will be   vermin vibes  font family doesn t contain special chars as  -      etc it only can contain spaces

[html] How do I install a custom font on an HTML site

Examples related to html

Examples related to css

Examples related to fonts

Examples related to webfonts