How to add some non standard font to website?

Discussion in 'HTML & Website Design' started by seosheela, Jan 28, 2011.

0
  1. #1
    How to add some non standard font to website? I need add new font in my website ?
     
    seosheela, Jan 28, 2011 IP
  2. wounded1987

    wounded1987 Well-Known Member

    Messages:
    2,914
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    150
    #2
    you use something called cufon. google it.....
     
    wounded1987, Jan 28, 2011 IP
  3. buzenko

    buzenko Peon

    Messages:
    93
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    CSS:
    
@font-face {
  font-family: "Graublau Sans Web";
  src: url(GraublauWeb.otf) format("opentype"); //Correct path to your font folder
}
 
 h1 {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}
    Code (markup):
    More and other font formats:

    
@font-face { 

font-family : "ChunkFive"; 
src : url("ChunkFive.eot"); 
src : url("chunkFive.svg#chunkFive") format("svg"),
url("ChunkFive.ttf") format("truetype"), 
url("ChunkFive.woff") format("woff"); 
}

h1 {
font-family : ChunkFive;
}
    Code (markup):
    .otf format font, correct use more browsers.
     
    buzenko, Jan 28, 2011 IP
  4. buddyborg

    buddyborg Guest

    Messages:
    36
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It seems alot more easy than it is. browsers are still converging on what font-format will be universal. 2 formats that are sure shots are : .ttf for mozilla and firefox, and .eot for IE and flock. My routine:
    1. I find a font that works. normally its a .ttf font.
    2. I use ttf2eot to convert the file :
    http://code.google.com/p/ttf2eot/downloads/list
    this leaves me with 2 files. a myFont.ttf and a myFont.eot
    3. Move the font files to my web directory
    4. Use a script to detect which browser, and output style sheet rules based on which browser. Firefox and Chrome take .ttf, IE and flock take .eot. for the @font-face rule.
    My browser detection script is php, but this may be done in a few other languages too.
     
    buddyborg, Jan 29, 2011 IP
  5. seosheela

    seosheela Member

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #5
    thanks for your replay i will try it
     
    seosheela, Jan 29, 2011 IP
  6. vickey88

    vickey88 Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Style sheet, you need to use these technique to use non standard fonts.

    @font-face {
    font-family: ‘Tangerine’;
    font-style: normal;
    font-weight: bold;
    src: local(’Tangerine Bold’), local(’Tangerine-Bold’), url(’../font/Tangerine.ttf’) format(’truetype’);
    }

    as you seen above that font must be store on your domain or you can give full path of any font. So after add this class on your css you can call “Tangerine” any where and all font changed as per new font style.

    h1, h2, {
    font-family: ‘Tangerine’, arial;
    font-size:40px;
    }

    So now your sites all h1, h2 will change.
     
    vickey88, Jan 29, 2011 IP