Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member
    Join Date
    Dec 2011
    Posts
    8
    Member #
    30359
    I'm using font family in the style.css to load a custom font for a page. The .ttf and .eot files are already the bold version of the font. When I load up the results though the font isn't showing as bold but it is loading the new font. I've tried adding font-weight:bold and even font-weight:900 and I'm not seeing any difference.

    Pastebin of main style sheet. Lines 25 - 32 are where I used font family to load the custom font
    main style sheet

    Pastebin of style sheet where font is trying to be used. See lines 16 and 17 where I tried to set it and make it bolder
    menu style sheet

    Any ideas on why it won't get any bolder or even show up how the original font files look? If anyone needs more info I'll gladly provide it. Thanks!

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    I don't have that much experience with calling fonts - could it have to do with the hyphen in the font name?

    1. @font-face {

    2. font-family: JosefinSansBold;

    3. src: url(/fonts/JosefinSans-Bold.eot) /* EOT file for IE */

    4. }

    5. @font-face {

    6. font-family: JosefinSansBold;

    7. src: url(/fonts/JosefinSans-Bold.ttf) /* TTF file for CSS3 browsers */

    8. }
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Junior Member
    Join Date
    Dec 2011
    Posts
    8
    Member #
    30359
    It seems to actually load the font fine though. For example, if I switch back and forth between JosefinSansBold and Helvetica I can see the font change on the page. When it tries to load JosefinSansBold though the style is right but it's a thinner version than what it should be. When I preview the actual JosefinSans-Bold.ttf file it looks much bolder than the resulting version on the site. It actually looks like JosefinSans-Regular.ttf which isn't even copied over to the server. Maybe there is something overriding it and changing the weight to something thinner?

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Your body font declaration in style.css has a 0.88em in it, and is overridding your menu styling in menu.css. Just take out the 0.88em, and it should look fine.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member
    Join Date
    Dec 2011
    Posts
    8
    Member #
    30359
    Thanks Ronald (for the 2nd time today)

    I took out the 0.88 and it changed the size some but still isn't as "thick" as it should be. Please see this comparison image of how it looks on the site versus in PS. Any ideas?

    font comparison

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    In Chrome, when I disabled the 0.88em, it looked like the image on the left.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Junior Member
    Join Date
    Dec 2011
    Posts
    8
    Member #
    30359
    Really? This is how it looks to me across IE / FF / Ch: comparison

    All I did was delete the "0.88em" part so that line now looks like:

    body {background:#fff;font: Arial,Helvetica,Geneva,sans-serif;line-height:1.5em;color:#444444;}

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Yeah, I see that it's looking like that now. Is the font set to "faux bold" in PS? If you right click the text with the text tool, you can check.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Junior Member
    Join Date
    Dec 2011
    Posts
    8
    Member #
    30359
    Yeah, it's showing faux bold and anti-alias - sharp as selected. So is PS making it more bold after the fact? Can I emulate that somehow with font-weight if that's the case?

  11. #10
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Yeah, if that's the case, PS is making it bolder. It appears you already have the bold version of this font, so it may not go bolder. Try using the regular version of the font and adding font-weight.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com