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 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    font-family requirements

    Hi,

    Does the browser or operating system define what font family a webpage can render?

    What font is used if the specified type is not available? Does the browser have a default font that then is used?

    Code:
    .myfont
    {
      font-family: "Antipasto";
    }
    Last edited by RedLars; 08-10-2011 at 08:11 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You should use the fonts which are available in all systems by default. Following are some links to understand font-family property of CSS.

    http://htmlhelp.com/reference/css/font/font-family.html

    http://www.w3schools.com/cssref/pr_font_font-family.asp

    http://www.w3.org/TR/CSS2/fonts.html#font-family-prop

    http://blooberry.com/indexdot/css/pr...fontfamily.htm



    However You can use any font using CSS3 property @font-face. Following is link for it

    http://www.w3schools.com/cssref/css3...-face_rule.asp


  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,475
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Quote Originally Posted by RedLars View Post
    What font is used if the specified type is not available? Does the browser have a default font that then is used?
    Well, yes, the system will use some kind of font, most likely the one that is set as default system font. You can and should specify a fallback font, though, like:
    Code:
    .myfont {
      font-family: Antipasto, Helvetica, Arial, Sans-serif;
    }
    This way the browser is using the first font that is existing on the system. The last one specifies a generic sans serif font for the system to choose if none of the earlier ones are found.

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for the response.

    The webpage is using a specifc font family according to a design. Using a rollback font will obviously change the design or make it inconsistent with other elements which I would like to avoid.

    The css attribute font-face looks interesting. If i understand this attribute correctly it will enable the browser to download the font necessary. This might solve the problem for newer browsers. One immediate problem seems to be IE supports other extensions (.eot) than Chrome, Safari and FF (.ttf and .otf). Atm I only have the font in .ttf extension. Are there any other issues I should think about when using this attribute?

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,475
    Thanks
    6
    Thanked 980 Times in 953 Posts
    OK, for one, it’s called “at-rule”, not attribute. HTML element have attributes. In CSS there are properties (and values) – and certain at-rules like @media, @import, or @font-face.

    Now, you can only embed a font with the CSS at-rule if the license of the font allows you to do so because technically people will be able to download the font from your server and use it themselves which some foundries don’t want. Some quick investigation on the Antipasti font led me to zetafonts which seems to be a little vague in the wording of the free non-commercial license. However, their commercial license clearly states that their fonts may only be embedded “in such a way that they cannot be extracted from the files you create.” First thing you have to determine now is if your project is commercial or non-commercial and in case of any doubt about CSS embedding contact the foundry.

    If everything is alright and you are allowed to embed the font with CSS then there is the Font Face Generator that converts your font file into all necessary formats and generates the necessary CSS for you for cross-browser compatible embedding. Note, however, that you should still provide alternative font families just in case. You should look for standard fonts that match the size and shape of the main font as closely as possible so that a fallback doesn’t affect your design too much.

  • Users who have thanked VIPStephan for this post:

    RedLars (08-11-2011)


  •  

    Posting Permissions

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