SitePoint Sponsor

User Tag List

Page 1 of 8 12345 ... LastLast
Results 1 to 25 of 184
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Forcing Fonts on a User

    Is there a way to FORCE my chosen Fonts on a user??

    Let's say I want to use some funky, obscure font to communicate something artistically, but I know the user likely won't have that font on their computer/browser...

    Can't I just point my webpage to some source that has the Font so that it is displayed for them as it is for me?

    (I know you can get into graphics, but that seems like a bad approach?!)


    Debbie

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The only thing you can force on people when they visit your web page is the content of the page. Anything else such as CSS etc can be easily overridden by them.

    Also trying to force people to download fonts to view your page is likely to force them to leave your site more than it is likely to get them to view your font.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As felgall already mentioned, It is hard to force things on people, since they can be easily overridden. There are ways though. Google for @font-face. They have hundreds of fonts that you can include in your stylesheet.

    Have a look here: @font-face

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you are talking about font embedding then you can find relevant information here.

    http://www.fontsquirrel.com/

    Note that you can only embed fonts that are licensed for the purpose so the choice is very limited.

    As Stephen said above you can't really force visitors to do anything they don't want to but you can make suggestions.

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems we were had the same thought Paul O'B

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    lol - at least we're reading from the same book

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you are talking about font embedding then you can find relevant information here.

    http://www.fontsquirrel.com/

    Note that you can only embed fonts that are licensed for the purpose so the choice is very limited.

    As Stephen said above you can't really force visitors to do anything they don't want to but you can make suggestions.
    I was talking about providing a link in my HTML so if they don't have *my* font then my webpage just downloads it (links to it) for them so they still can view things in *my* font.

    Same concept as how your stylesheets work...


    Debbie

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Is there a way to FORCE my chosen Fonts on a user??
    Use a PDF and embed the font in it ... that's the only reliable way.

    There are various ways of using your preferred font in web pages, such as @font-face, sIFR and others, but the problem is that you often run into licensing issues - and even then, it relies on the user's browser supporting your chosen method, which isn't 100&#37; certain. You can't usually throw your fonts around for other people to run willy-nilly. And while these methods are fine for headings and small items, they are likely to cause performance issues if used for body text.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I was talking about providing a link in my HTML so if they don't have *my* font then my webpage just downloads it (links to it) for them so they still can view things in *my* font.
    Provided it actually is your font that you created yourself from scratch you could do that. If someone else created the font then they own the copyright on it and their licence almost certainly does not allow you to distribute it since they will want to get paid for every copy of their font.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Provided it actually is your font that you created yourself from scratch you could do that. If someone else created the font then they own the copyright on it and their licence almost certainly does not allow you to distribute it since they will want to get paid for every copy of their font.
    Paul mentioned open-source fonts above.

    (Although I didn't understand ANYTHING that said website was offering since there are no instructions or "About Us"?!)

    But presumably there are a lot of "free" and open-source fonts out there in this day and age...


    Debbie

  11. #11
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @font-face can be a little daunting at first, even with FontSquirrel - however it's well worth it. @font-face, used with a particular CSS trick promulgated by the Squirrel and others, accomplishes exactly what you want to do: It "serves" a special font to your users so they see the text the way you want even if they don't happen to have a copy of "Super-Funky-Left-Handed-Goose-Tracks.ttf" on their computer.

    Like most things in web development, there are some cons:

    • As felgall always faithfully mentions you must make sure your font is open source, not just free! Use FontSquirrel fonts and you should be okay; if you use their generator with your own fonts, however, you are on your own.
    • Bandwidth suffers, though not horribly - the font files must be downloaded by each user and they can be sizeable.
    • @font-face requires a special CSS trick to work in all major browsers. The good news is that FontSquirrel gives you a CSS file already made up and ready to go.


    Google also has a small font kit offering which you might check out at http://code.google.com/webfonts. The main advantage of using their rather narrow selection is that, with popularity of Google's font service almost sure to grow, the bandwidth savings due to pre-cached font files could be substantial.

    Hope this helps. I love @font-face myself, and use it frequently. FontSquirrel has made it quite easy once you understand the basics.

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kenquad View Post
    @font-face can be a little daunting at first, even with FontSquirrel - however it's well worth it. @font-face, used with a particular CSS trick promulgated by the Squirrel and others, accomplishes exactly what you want to do: It "serves" a special font to your users so they see the text the way you want even if they don't happen to have a copy of "Super-Funky-Left-Handed-Goose-Tracks.ttf" on their computer.

    Like most things in web development, there are some cons:

    • As felgall always faithfully mentions you must make sure your font is open source, not just free! Use FontSquirrel fonts and you should be okay; if you use their generator with your own fonts, however, you are on your own.
    • Bandwidth suffers, though not horribly - the font files must be downloaded by each user and they can be sizeable.
    • @font-face requires a special CSS trick to work in all major browsers. The good news is that FontSquirrel gives you a CSS file already made up and ready to go.


    Google also has a small font kit offering which you might check out at http://code.google.com/webfonts. The main advantage of using their rather narrow selection is that, with popularity of Google's font service almost sure to grow, the bandwidth savings due to pre-cached font files could be substantial.

    Hope this helps. I love @font-face myself, and use it frequently. FontSquirrel has made it quite easy once you understand the basics.
    Aha... progress!!

    So, if I take your advice, what are the chances that...

    a.) The font wouldn't load properly and render my site useless
    b.) Blow up the user's computer
    c.) Create an explosion with body-parts everywhere?!

    Or is it as simple as if it doesn't work, then a "default" font like Arial will load?

    Do you have any examples where you have used this with success and that render your pages "graphic designer print quality"??

    Thanks,


    Debbie

  13. #13
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    So, if I take your advice, what are the chances that...

    a.) The font wouldn't load properly and render my site useless
    a.) None, unless your site would be useless if the special font were replaced with something generic such as Times New Roman. I don't know how familiar you are with CSS font stacks, but they work just the same with @font-face -attached fonts as they do with regular ones. For example, after attaching a special font with @font-face, I might create a rule similar to the following:

    Code:
    h1 {
    font-family: goose-tracks, microsoft sans serif, arial, sans;
    }
    Now if for some reason "Goose Tracks" fails to load, h1 will fail over to the next chosen font. If no backup fonts are specified, it will devolve on the user's default - usually Times New Roman or something similar.

    b.) Blow up the user's computer
    Only if you use MS Comic Sans and the user is a graphic designer.

    (Case in point though - you can't legally embed MS Comic Sans, although most people do have it already.)

    Do you have any examples where you have used this with success and that render your pages "graphic designer print quality"??
    You can see all the live demos you could ever want on FontSquirrel - go to this page and click "View @ff demo" just above any font preview. The result, such as this one, is a live attached font, not an image.


    Or is it as simple as if it doesn't work, then a "default" font like Arial will load?
    Yes. See above explanation of font stacks.

  14. #14
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to know more about the guts of it check out Paul Irish's awesome article here: http://paulirish.com/2009/bulletproo...tation-syntax/

    Not to beat a dead horse, but if you stray from FontSquirrel or Google Fonts please PLEASE contact the author before you just paste it into your page.

  15. #15
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beebs93 View Post
    If you want to know more about the guts of it check out Paul Irish's awesome article here: http://paulirish.com/2009/bulletproo...tation-syntax/
    That's a super article - just remember, you don't have to understand how it works to use it. With FontSquirrel, it's pretty much copy and paste.

  16. #16
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kenquad View Post
    a.) None, unless your site would be useless if the special font were replaced with something generic such as Times New Roman.
    Fabulous!!


    I don't know how familiar you are with CSS font stacks, but they work just the same with @font-face -attached fonts as they do with regular ones. For example, after attaching a special font with @font-face, I might create a rule similar to the following:

    Code:
    h1 {
    font-family: goose-tracks, microsoft sans serif, arial, sans;
    }
    Yes, I understand this.


    You can see all the live demos you could ever want on FontSquirrel - go to this page and click "View @ff demo" just above any font preview. The result, such as this one, is a live attached font, not an image.
    There website is POORLY laid out and is NOT very intuitive. (After looking at things for like 3-4 minutes and re-reading what you just said, I finally figured out how to view different fonts?!)


    Thanks for all of the comments and tips!!

    It sounds like you are an expert in this area.

    I'm glad there is a way to do what I originally inquired about. (I was skeptical when the first few posters made it sound impossible.)

    So, I guess the next important question is...

    WHERE and HOW does a person become well-versed in Fonts, Typography, and so on??

    (I can see where it would be easy to go Comic Sans crazy with "pretty" fonts and end up with an unreadable and really crappy looking website!!)


    Debbie

  17. #17
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beebs93 View Post
    Not to beat a dead horse, but if you stray from FontSquirrel or Google Fonts please PLEASE contact the author before you just paste it into your page.
    Yep, no worries.

    Besides, there are more fonts there then I'd know what to do with?!

    Thanks everyone!!!


    Debbie

  18. #18
    I Use MODx kenquad's Avatar
    Join Date
    Dec 2009
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    So, I guess the next important question is...

    WHERE and HOW does a person become well-versed in Fonts, Typography, and so on??
    Can't help you much on this one - I am stilling learning by experience myself A great starting point is just not to go crazy - stick to legible fonts, and use just 1 or 2 different ones per page.

  19. #19
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Is there a way to FORCE my chosen Fonts on a user?
    Think about what you just said... How would you like it if someone forced you to do something you didn't want?

    Quote Originally Posted by DoubleDee View Post
    Let's say I want to use some funky, obscure font
    Ever think it might be funky/obscure for a reason?

    Quote Originally Posted by DoubleDee View Post
    to communicate something artistically
    If the text itself is not communicating your meaning, you've got the wrong text. "communicate artistically" is a bit like abundant poverty or recycling dump.

    From an accessibility and bandwidth point of view there's a reason no two browser makers on the same page on doing this, and why it's just a REALLY BAD IDEA. Sometimes it just really helps to say "no" to your inner art-***.

    Though if you are going to do it, you could do worse than fontsquirrel's approach of mixing all the different formats... even if it does end up a bandwidth chewing mess.

  20. #20
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    even if it does end up a bandwidth chewing mess.
    That's the part that loses visitors to the page - the extra time it takes to download the font.Extra time to decide to hit the back button before the page finishes loading.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I'm glad there is a way to do what I originally inquired about. (I was skeptical when the first few posters made it sound impossible.)
    I believe I linked to the font squirrel site in my first post and so did Donboe but we could have explained ourselves more clearly perhaps as kenquad did .

  22. #22
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    That's the part that loses visitors to the page - the extra time it takes to download the font.Extra time to decide to hit the back button before the page finishes loading.
    Which is why it's nice to have a browser who shows some kind of default text right away... let the font sit there and load... I might be done reading by then but whatever.
    But I remember something in the CSS3Live course about Saffy/Chrome not showing any text until the font has loaded? What a load... I'd be PO'd.

  23. #23
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by kenquad View Post
    Code:
    h1 {
    font-family: goose-tracks, microsoft sans serif, arial, sans;
    }
    Remember that you will need quotes round any font names that have spaces in.

  24. #24
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Think about what you just said... How would you like it if someone forced you to do something you didn't want?
    No, but I wasn't talking about *forcing* people from their homes!

    I could basically *force* someone to view my web pages in Serif font and there isn't much they could do unless they manually went in and changed their browsers.

    You are reading too much into what I was saying.


    Ever think it might be funky/obscure for a reason?
    Ever ponder that the reason printed material looks so much more professional is because you have professional looking typeface?


    If the text itself is not communicating your meaning, you've got the wrong text. "communicate artistically" is a bit like abundant poverty or recycling dump.
    You've got to be kidding?!

    Then apparently you've never been to somewhere like Barnes & Noble and read a real paper book...

    With the spoken word, 93% of communication is non-verbal.

    Can't say how that translates to the written world, but I can definitely tell you that 99% of written communication is NOT JUST the content. (If that was the case, SitePoint would be out of business and we'd all be using Mainframes to talk!!)


    From an accessibility and bandwidth point of view there's a reason no two browser makers on the same page on doing this, and why it's just a REALLY BAD IDEA.
    Where do you come up with this stuff?

    The reason there is no "browser harmony" in the world is $$$ and indifference.

    Some groups like W3C and SitePoint strive for standards, while others are driven by profits and a need to control the world (i.e. Oracle).

    Using creative, yet sensible, non-standard typeface is not a sin, and people have been doing it well before your grandparents were alive...


    Sometimes it just really helps to say "no" to your inner art-***.
    Then stay with monospace font and you won't have anything to worry about.


    Though if you are going to do it, you could do worse than fontsquirrel's approach of mixing all the different formats... even if it does end up a bandwidth chewing mess.
    I'd recommend taking some college course on typography or even going to work for a printer or graphic artist (who would likely laugh you out of the county with your above comments).

    Even in the digital world, typeface matters. And companies like Apple, Adobe, Microsoft, IBM, Citibank, Target, etc spend millions on "branding" that include choosing the *right* - read non-standard - typeface to *communicate* their messages.

    Nothing personal, but you clearly don't have any experience on this topic, because what you are saying spits in the face of about 200+ years of proven research on this topic.

    But I digress...



    Debbie

  25. #25
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,930
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I believe I linked to the font squirrel site in my first post and so did Donboe but we could have explained ourselves more clearly perhaps as kenquad did .
    Yes, you did. But what I took from the first couple of posts was that it couldn't be done or that it was difficult to do.

    It's all good.

    (Even the great Paul O' has off posts...)


    Debbie


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
  •