Using custom fonts

Discussion in 'CSS' started by Biobob, Jul 4, 2012.

0
  1. #1
    Hey , how do i implement a font that the client has provided , such as a custom "DIN Schrift" font, firstly do i use font face? and secondly, how do i implement the font , it doesnt appear right, as the font family is DIN Schrift, but the font weight instead of having bold , normal, italic etc, it has "1451 Engshrift" , so how do i get 1451 Engshrift to be its style in CSS?
     
    Solved! View solution.
    Biobob, Jul 4, 2012 IP
  2. ashishkg

    ashishkg Active Member

    Messages:
    233
    Likes Received:
    8
    Best Answers:
    3
    Trophy Points:
    68
    #2
    So first download the font and call in css like this
    @font-face {
    font-family: 'ZapfinoLinotypeOneRegular';
    src: url('fonts/zapfino-linotype-one-webfont.eot');
    src: url('fonts/zapfino-linotype-one-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/zapfino-linotype-one-webfont.woff') format('woff'),
    url('fonts/zapfino-linotype-one-webfont.ttf') format('truetype'),
    url('fonts/zapfino-linotype-one-webfont.svg#ZapfinoLinotypeOneRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
     
    ashishkg, Jul 5, 2012 IP
    wizardofx likes this.
  3. jenev

    jenev Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #3
    Here is one excellent article:

    sixrevisions.com/css/font-face-guide/
     
    jenev, Jul 5, 2012 IP
  4. Biobob

    Biobob Active Member

    Messages:
    119
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #4
    thanks guys
     
    Biobob, Jul 5, 2012 IP
  5. jenev

    jenev Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #5
    You are welcome. This week I'm gonna testing @font-face whether is safe in all browsers.

    Regards,
    Jordan!
     
    jenev, Jul 6, 2012 IP
  6. #6
    All modern browsers will use at least one of the formats (TTF, EOT, WOFF or SVG), while IE has had support back to version 5 over a decade ago).

    Getting the font into all those formats can be done online using this site:
    http://www.fontsquirrel.com/fontface/generator/

    Which also provides working code.

    Due to the size of font files, they should be used with an eye-dropper. A lot of fonts are also just not suitable for 'flow' text which is why if someone wants to use a custom font across the entire page, I try to talk them out of it... quite often they just render like arse since a great many fonts are designed for print, not screen.
     
    deathshadow, Jul 6, 2012 IP
  7. mooglan

    mooglan Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    google also provides some custom web fonts. Try searching 'google web fonts'. easiest way to use and hundreds of fonts for free
     
    mooglan, Jul 10, 2012 IP
  8. abdel

    abdel Peon

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    google.com/font she give ready codes
     
    abdel, Jul 15, 2012 IP
  9. wizardofx

    wizardofx Well-Known Member

    Messages:
    572
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    140
    #9
    The first time I noticed this is when I downloaded the css from overstock.com
    After formatting it turned out to be 70 pages long! They have a lot of font downloads
    some of which have custom names like ovrstc.ttf. Of course this might be off-the-shelf
    fonts that are renamed to make it easier to switch them.

    wiz
     
    wizardofx, Jul 20, 2012 IP