SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 71

Thread: embedding fonts

  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    embedding fonts

    Can you embed fonts using CSS? If so, what is the best way to do it?

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    yes and no.

    You can only embed free fonts without a license on the web.
    http://www.zeldman.com/2009/12/02/bu...oof-font-face/

    Use this tool to generate the files and css needed:
    http://www.fontsquirrel.com/fontface/generator

    Just be sure not to use this for licensed fonts.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Hi, assuming you have a license or there is a font that doesn't need one you can use opentype fonts for IE, and truetype fonts for non IE (conditional comments to feed to IE of course )

    Though you oculd use sIFR or Cufon instead
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe this is a stupid question, but how do I know if it is licensed or not?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    It should say when you go and get it otherwise shouldn't it? I'm not an expert on this subject.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by geradc View Post
    maybe this is a stupid question, but how do I know if it is licensed or not?
    That's not a stupid question at all.

    You can use any of these free fonts.
    http://www.fontsquirrel.com/fontface

    Unless it's explicitly stated, chances are the font will not be free to use on the web. http://www.josbuivenga.demon.nl/ is the website of a popular font designer who has released some excellent free fonts.

    The vast majority of the popular fonts used in print design like 'Helvetica Neue' cannot be used using this method.

  7. #7
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for your prompt replies. I appreciate the help.

  8. #8
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by geradc View Post
    Can you embed fonts using CSS? If so, what is the best way to do it?
    If you do not want to use @font-face (as browser support is slightly dodgy) you could use techniques like sIFR which is essentially embedding the font and text within a flash component (in such a way that it's accessible). I have provided a link below which may assist you (though this kind of usage is only any good for title's as it does tend to affect the loading speed of websites).

    http://wiki.novemberborn.net/sifr/

    Quote Originally Posted by geradc View Post
    maybe this is a stupid question, but how do I know if it is licensed or not?
    If you do intend on using @font-face to apply custom font's to your website you should be able to check if you are legally allowed to use that font in such a manner by checking the font makers website (or contacting them), generally font creators are becoming more flexible with allowing such implementations of their typefaces so you probably could negotiate some kind of permission to use the fonts for that purpose. If you search a font's name in Google the Foundry (place which made it) should be able to be discovered (so you can find out more details).

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    (as browser support is slightly dodgy)
    No it's not.
    All modern browsers support a flavour of it, and all IE's worth mentioning.

    The CSS and font formats that FontSquirrel generates for you support the following:

    # Original TrueType or OpenType Fonts for Firefox 3.5 and Safari
    # EOT fonts for Internet Explorer
    # SVG fonts for Opera, iPhone & Chrome
    # WOFF fonts for Firefox 3.6+

  10. #10
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    markbrown4, how is browser support not dodgy? No one browser supports it completely and Internet Explorer uses a proprietary modified version of it which requires a nasty little tool which hasn't been updated in years in order to make font's "worthy of being used". Sorry but no-one can claim legitimately that browser support for @font-face Isn't dodgy purely on the basis that there is so much differentiation between the ways they are implemented it's pretty much as bad as opacity support. Just because some website manages to produce a system for having all the various implementations you need does not detract from the fact that you need tools like that in the first place, browser support for it is entirely dodgy, there's no one solid implementation in place and excluding licensing issues there are a whole variety of additional issues such as the manner in which they are downloaded (and installed) and how this can impact the end user.

  11. #11
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    You make it sound a lot worse than it is. The truth is that lots of leading web designers are using this already. If you're passionate about the types of font you want to embed just use those in a browser that supports it, and let the others use another similar font.
    there are a whole variety of additional issues such as the manner in which they are downloaded (and installed) and how this can impact the end user.
    What are the whole variety of other issues?

  12. #12
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Font size can be an issue, many opentype font's can be anything up to several megabytes in size, anyone on a slow or limited connection will end up having to wait a VERY long time for the page to load as each font has to be physically downloaded. Also some browsers prompt users asking for permission to install a font (Internet Explorer does if I remember correctly), what this means is the user experience will be seriously inhibited (along with accessibility) by the matter that their being asked questions before the page will load or they can click anywhere on the canvas). Those are just a couple of reasons... while @font-face might be a good idea in principle it's poorly implemented, inconsistent and it's only being used as a matter of making websites look pretty rather than usable.

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Alex just because the browser support isn't quite as nice as you would want "aka downloading the font and everything" doesn't mean support is dodgy. I think that is the point he was trying ot make- you can use it if you want because it is supported
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Ryan, inconsistent support is inconsistent support, I'm not going to mince words and say it's some sort of solution to the problem of web typography because it has a long way to go before it will become a well rounded "tool". CSS Opacity is supported but it doesn't mean the implementation is pretty or well rounded.

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Actually if you don't mind using filters then yes CSS opacity is supported quite well. Though not that it's a complicated subject.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #16
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Like I said, it's not about whether it's supported, it's about consistent implementation. Which as far as I am concerned is paramount, inconsistency tends to undermine standards. @Font-face is widely supported but I am far from convinced that it is implemented in such a way that usability and accessibility will not be undermined.

  17. #17
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Font size can be an issue, many opentype font's can be anything up to several megabytes in size, anyone on a slow or limited connection will end up having to wait a VERY long time for the page to load as each font has to be physically downloaded.
    To be honest I hadn't actually considered this, I was too busy being elated at the chance to easily use non web-safe fonts.

    Jonathon snook uses 2 custom fonts with @font-face on his site http://snook.ca/
    LeageGothic opentype 16kb
    The other font isn't linked to externally but using data: embedded in the stylesheet: the source weighs in at 25kb
    url(data:font/opentype;base64,DATA) format('opentype');

    I'm not sure why he chose to use that method - maybe he found the performance to be better.
    Also some browsers prompt users asking for permission to install a font (Internet Explorer does if I remember correctly), what this means is the user experience will be seriously inhibited (along with accessibility) by the matter that their being asked questions before the page will load or they can click anywhere on the canvas).
    I haven't actually tested IE's implementation, though I did find this great article: http://jontangerine.com/log/2008/10/...web-fonts-work
    If you really are passionately opposed to IE's methods then don't link to the eot file.
    Those are just a couple of reasons... while @font-face might be a good idea in principle it's poorly implemented, inconsistent and it's only being used as a matter of making websites look pretty rather than usable.
    I do appreciate you sharing you're thoughts - they haven't convinced me not to use @font-face but have made me question a few more things.

    Aesthetics (making it pretty) is a huge part of the web and our ability to read and understand the data/pictures you present. While Type can be wonderfully pretty - it's true benefit to the web is in making it more readable. Whilst type isn't important to you please don't put it in the gutter - you have a mentor badge and might be listened to

  18. #18
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Another thing to consider when using custom fonts like that with @font-face is that it can break the CSS command completely for some web browsers leaving the people using those browsers viewing the page in a default font such as Times New Roman or Comic Sans.

    You need to consider whether it is worth giving up all control of what font some visitors see the page in so as to gave more control of how some other visitors will see it.
    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="^$">

  19. #19
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Like I said, it's not about whether it's supported, it's about consistent implementation. Which as far as I am concerned is paramount, inconsistency tends to undermine standards. @Font-face is widely supported but I am far from convinced that it is implemented in such a way that usability and accessibility will not be undermined.
    If consistency is paramount (of the highest importance) then I suppose you are abstaining from writing code specifically for IE - or making any use of the advanced css in supported browsers - or using anything with a vendor prefix.
    Code css:
    @font-face {
      font-family: 'GothicCustom';
      src: url("LeagueGothic.eot");
      src: local('League Gothic'),
    	url("leaguegothic.svg#lg") format('svg'),
            url("LeagueGothic.otf") format('opentype');
    }
    I really don't find anything too offensive about linking to three different types of font files here. This only needs to be declared once and then you link to it directly.
    Code:
    .alex-pretty-font {
      font-family: GothicCustom;
    }
    After reading Handcrafted CSS you chose to make consistent implementation paramount, please have another read.

  20. #20
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by felgall View Post
    Another thing to consider when using custom fonts like that with @font-face is that it can break the CSS command completely for some web browsers leaving the people using those browsers viewing the page in a default font such as Times New Roman or Comic Sans.

    You need to consider whether it is worth giving up all control of what font some visitors see the page in so as to gave more control of how some other visitors will see it.
    I only support browsers worth mentioning. When you say it 'breaks the CSS command completely' do you mean that the fallback fonts won't be used?
    Code:
    font-family: GothicCustom, 'Arial Black', Arial, sans-serif;

  21. #21
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    When you say it 'breaks the CSS command completely' do you mean that the fallback fonts won't be used?
    Yes I mean exactly that. Some browsers that don't understand the custom font reference will discard the entire list of fonts and use the browser default instead - depending on which browsers you are trying to support with your custom font (eg. IE) that may invalidate your entire list of fonts for other popular browsers.
    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="^$">

  22. #22
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I would second to felgall. If its not supported on all browsers, better off not using that.

  23. #23
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by felgall View Post
    Yes I mean exactly that. Some browsers that don't understand the custom font reference will discard the entire list of fonts and use the browser default instead
    Which browsers are we talking about here?
    Quote Originally Posted by felgall View Post
    Depending on which browsers you are trying to support with your custom font (eg. IE) that may invalidate your entire list of fonts for other popular browsers
    You've lost me. When will trying to support IE with an eot font invalidate the other formats?

    Thanks,

  24. #24
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    There are a couple of different ways of specifying the font to be embedded. One way will only work some of the time in IE and is dependent on how their particular browser is configured. The second will always work with IE but breaks the code for other browsers. Sounds like you are using the first way where only some IE users will actually download your custom 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="^$">

  25. #25
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by felgall View Post
    There are a couple of different ways of specifying the font to be embedded. One way will only work some of the time in IE and is dependent on how their particular browser is configured. The second will always work with IE but breaks the code for other browsers. Sounds like you are using the first way where only some IE users will actually download your custom font.
    Then the solution seems obvious to me - serve IE with the version that works all the time via a ie specific stylesheet.

    Can you give me the specifics of the different ways you are describing and what configuration in IE you are talking about?
    Sounds like you are using the first way where only some IE users will actually download your custom font.
    Is it true that the default configuration in IE supports this method?

    We need to make a rule about using words like some / just / merely without explanation


Tags for this Thread

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
  •