SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    @Font-Face Question

    Hi Guys,

    I'm using the @font-face rule to embed fonts on my site that are stored on my server.

    My problem is this:

    I'm using a bold sans serif face, so obviously I don't specify font-weight: bold; as then the browser would try to bold the already bold font and it would look horrible.

    So far - so good. I want to use "Arial" as my fallback font (next in the stack) but I need to let the browser bold it and increase it's size without affecting the embedded.

    Any ideas guys?

    Cheers,
    simon

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Code:
    @font-face {
      font-family: "MyFont";
      src: url( "not-bold-font.ext" ); 
    
      font-weight: normal;
      font-style: normal;
    }
    
    @font-face {
      font-family: "MyFont";
      src: url( "is-bold-font.ext" );
    
      font-weight: bold;
      font-style: normal;
    }
    
    div { font-family: MyFont, Arial; font-weight: bold; }
    That is how you setup font variations (bold, italic) with @font-face, they must all have the same font-family name along with font-weight and font-style dictating the type of variant. Btw, programs do not actually bold fonts, the swap a non-bold font for a bold variant version. In some cases if no bold varuant is available for the current font it swaps to a font, that may or may not look like it, that has bold variant.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,
    but I need to let the browser bold it and increase it's size without affecting the embedded.
    Font-size-adjust was supposed to address this issue but is only available in Firefox at the moment. there's not much you can do for other browsers except pick a fall-back font that is closer in size.
    so obviously I don't specify font-weight: bold
    I believe if you create another rule for your font-face and adding font-weight:bold to it (but still referencing the src of the lighter font) you will trick the browser into believing that is has found the bold version of your font and not apply its faux bolding to it. The fallback font will still get bolded though. See this article for more info. (It's sort of the opposite of what Logic_earth suggest above ).

  4. #4
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    (It's sort of the opposite of what Logic_earth suggest above ).
    Actually it the same thing I posted...just I was more simpler by doing it all from the top of my head and without any explanation. >.>
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.



Bookmarks

Posting Permissions

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