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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Please explain external CSS

    As I've said in another post recently, I'm using a tumblr theme that employs a font that I particularly like. From what I can gather, the font is 'Open Sans', Sans-Serif, but it seems that in order for the tumblr theme to display this font, it has to use the following external CSS: http://fonts.googleapis.com/css?fami...n+Sans:400,700

    I have no problem with this, except that it makes my pages behave sluggishly while it grabs the info form the external CSS.

    If I remove the code for this external CSS, the font defaults to something similar, but smaller and not as clear.

    Why is this external CSS needed, and is there anything I can do in order to use this font without it?

    The test forum where I'm using it is here: http://freepichost.tumblr.com/ (SFW)

    Thanks in advance.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It won't so much be the link to the css file that causes the delay, so much as retrieving the font files (linked in the css file) from the Google API and displaying them.

    This approach (@font-face) allows you to display non-standard fonts on your page, even if the user does not have the font installed on their machine, by downloading the font as part of the page. This does obviously take longer than using a 'standard' font such as Arial which will be locally installed on the machine.

    So that's why there's a delay. However, I'd say it's a pretty small one - barely noticeable on my broadband connection.

    You're going to have to either live with the delay or change the font. The font you've chosen seems pretty close to Verdana to me, which you can use without having to call the font file.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    OurJud (02-13-2013)

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First u have to make the css code to related application and then u have to attached on the css code to that page where u want to show.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by OurJud View Post
    Why is this external CSS needed, and is there anything I can do in order to use this font without it?
    It isn’t needed, you could as well download the font and host it yourself (if you can modify the theme and have access to webspace on the same domain). Fontsquirrel has a ready-made font-face kit, or – for maximum control over performance – you can convert the base TTF file into the required formats with their font converter.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Quote Originally Posted by VIPStephan View Post
    ...you could as well download the font and host it yourself ....
    I've always assumed that you can't do that on Tumblr?
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #6
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    I've always assumed that you can't do that on Tumblr?
    No, you can't. Tumblr is nothing more than a free blogging platform.

    Thanks to all who replied.

    SB65, I think I'll probably switch to Verdana, because while the delay is nominal - as you say - it does niggle me. The only thing with standard fonts is finding a nice size. With standard fonts I personally find 11px too small and 12px too big. This @Font was the first I've come across that offered something in between.

    Having said that, it's all guess work I suppose, as it all depends on everyone's monitor and res settings what size they display at.

    Thanks again.


  •  

    Posting Permissions

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