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 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    fallback necessary when using font@face?

    If i use font@face and place the font in a folder on my server, do i still need to add fallback-fonts? Or can all browsers use the font placed on the server?

    Im not sure if we use font-family with several different fonts is because

    - the browsers can not render certain fonts or
    - because browsers dont have access to the fonts

    Anyone?

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,589
    Thanks
    0
    Thanked 644 Times in 634 Posts
    If you specify the font definitions in the right order then most of the popular browsers should be able to use one of the four formats you supply the font in. Other less popular browsers will either use a fallback font or will ignore the font definition completely and use Times New Roman.

    To maximize the chances of browsers being able to use the font specify it in this order:

    Code:
    @font-face {
         font-family: 'MyFontFamily';
         src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
             url('myfont-webfont.woff') format('woff'),
             url('myfont-webfont.ttf') format('truetype'),
             url('myfont-webfont.svg#svgFontName') format('svg');
         }
    where myfont-webfont is whatever your font is called.

    Just remember that specifying it in that order means that the font will download even if it is already installed. There is an alternate arrangement that will use the local copy if the font is already installed but that version crashes the operating system when using an android phone or other android based device.
    Last edited by felgall; 01-31-2012 at 07:41 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thx for reply felgall

    Im still not sure how browsers approach fonts. Assuming were talking about popular western browsers like Chrome, Firefox, IE, Safari and Opera..

    1. Do browsers have pre-installed fonts in their setup / software? So if we want to use special fonts, it will not work because the specific font isnt pre-installed in browser?

    2. Or are the limited use of fonts in browsers due to the fact that browsers are not capable of rendering special fonts when "imported" from the server with an url?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Browsers don’t have pre-installed fonts, it’s the operating system where the fonts are installed and from which the browser takes them. If you declare a font in your stylesheet the browser looks for it in the user’s OS and if it can’t find the font installed there it resorts to any fallback that is specified. This is why we are used to writing font-family: Helvetica, Arial, Sans-serif; or the like. If Helvetica can’t be found the browser looks for Arial; if that’s not installed it resorts to the default sans-serif font of the operating system (clearly, there is at least one kind of font installed in order to be able to display text). If you supply fonts with font-face then they don’t need to be installed on the user’s OS (that’s the point of it) and theoretically you wouldn’t need to provide a fallback. But since not all browsers necessarily support @font-face (it’s not the rendering, it’s the support of the CSS property/at-rule) or downloading fonts can be blocked, and because it’s barely any major additional effort, it’s still advisable to provide fallback fonts, and it’s not any different from what I showed earlier:
    Code:
    font-family: CustomFont, Helvetica, Arial, Sans-serif;

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok thx got it now.

    But.. how does the styling "important" fit in then?

    font-family: Verdana !important;

    Why do we declare "important" if browsers by nature go for the first font declared in the font-family, then second and so on?

    Why use the "important"-declaration at all?

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    That !important declaration is not related to the font, it’s related to the CSS rule which is made more important than a CSS rule that may come afterwards and would normally override this one. By setting !important you’re telling the browser that this rule should have a higher specificity (“weight”) than following rules adressing the same element(s).

    Code:
    div {font-family: Georgia !important;}
    div#example {font-family: Arial;}
    /* Normally, the second rule would override the first one because it comes later in the code and through the ID selector it has a higher specificity. Setting !important makes the first rule override the second one. This is not just for font related styles, it can be used for everything: */
    div {color: green !important;}
    div {color: red;}
    /* first rule is more important and overrides the second one */
    Last edited by VIPStephan; 02-01-2012 at 12:16 PM.

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok ive got it. I think..
    Last edited by henry hayes; 02-01-2012 at 01:32 PM.

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thx for info. Conclusion is, correct me if wrong, that font@face imports every font (with correct extension for spcific browser) as long as available on server. Hierachy is no. 1 first, then no. 2 and so on in a font-family.

    When it comes to using "important", this declaration adresses the "natural" hierachy of CSS; the last styling in CSS can be outnumbered by adding "important" in a previous styling.

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,589
    Thanks
    0
    Thanked 644 Times in 634 Posts
    You shouldn't need to use !important in the stylesheet you attach to a web page - if you have a situation where it looks like you need it then you simply have the CSS the wrong way around.

    Your visitors would use it in the stylesheet they attach to their browser so as to make sure that their styles still override yours even if yours are more specific and so would normally take priority.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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