Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    How do I make available some of the font-family on my web site ?

    I am using a few font-family on my pages that are not available to everyone so it seems.

    For example

    'Broardway' is not on vista for Firefox and shows a some standard style instead.

    I have the .ttf file in a fonts folder on my site but do not know how to link then to the text ?

  • #2
    Senior Coder
    Join Date
    Jul 2011
    Posts
    1,226
    Thanks
    3
    Thanked 171 Times in 171 Posts
    With CSS, you can use @font-face to define custom fonts.
    http://www.css3.info/preview/web-fonts-with-font-face/

    If you're just using standard fonts, you can define the one's you want to use in font-family in order of preference - separating them with commas.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Have a look at http://www.fontsquirrel.com/ for an easy way to generate what you need - specifically creating the non standard eot format required for IE.

  • #4
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by BluePanther View Post
    With CSS, you can use @font-face to define custom fonts.
    http://www.css3.info/preview/web-fonts-with-font-face/

    If you're just using standard fonts, you can define the one's you want to use in font-family in order of preference - separating them with commas.

    I see that the sites source code shows

    <pre>@font-face {
    font-family: Delicious;
    src: url('Delicious-Roman.otf');
    }

    @font-face {
    font-family: Delicious;
    font-weight: bold;
    src: url('Delicious-Bold.otf');
    }</pre>


    Can I not just use the style.css file I have ?

  • #5
    Senior Coder
    Join Date
    Jul 2011
    Posts
    1,226
    Thanks
    3
    Thanked 171 Times in 171 Posts
    Yeah, just add @font-face element to your existing style.css and it should work fine.

  • #6
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by BluePanther View Post
    Yeah, just add @font-face element to your existing style.css and it should work fine.
    yep that work, but it is not allowing me to print with this font, using firefox 5.0, it is printing the fonts in IE though !

  • #7
    Senior Coder
    Join Date
    Jul 2011
    Posts
    1,226
    Thanks
    3
    Thanked 171 Times in 171 Posts
    There must be an error in your code then, as font face is supported by all major browsers. w3schools.com/cssref/css3_pr_font-face_rule.asp

    can you post your current css code?

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by BluePanther View Post
    There must be an error in your code then, as font face is supported by all major browsers. w3schools.com/cssref/css3_pr_font-face_rule.asp

    can you post your current css code?
    @font-face is, but not all font files.

    WOFF files should cover IE9+ and Firefox 3.6, EOT IE4-8, and TTFs (substantially smaller than OTFs) Chrome and Firefox < 3.6

  • #9
    Senior Coder
    Join Date
    Jul 2011
    Posts
    1,226
    Thanks
    3
    Thanked 171 Times in 171 Posts
    Quote Originally Posted by Apostropartheid View Post
    @font-face is, but not all font files.

    WOFF files should cover IE9+ and Firefox 3.6, EOT IE4-8, and TTFs (substantially smaller than OTFs) Chrome and Firefox < 3.6
    That's similar to W3Schools summary, except they make no hint towards ttf being depreciated? And also no hint towards eot being depreciated for IE.

  • #10
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by BluePanther View Post
    That's similar to W3Schools summary, except they make no hint towards ttf being depreciated? And also no hint towards eot being depreciated for IE.
    depreciate does not mean deprecated (just FYI)

    TTFs are not deprecated, nor are EOTs; both will work in modern browsers (sorry if I didn't make that clear.) The OP was just using a straight OTF, which is why I drew specific attention to filetypes.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •