How do we use a custom font on a webpage?



  • Do we use transparent images? Or HTML?



    Nahhhh.... Lets use flash!



  • Is that SIFR? My own personal nightmare? Pretty sure I've posted about that before, but it's been years.



  • I was wondering what you were on about until I remembered that I use Flashblock! I get neither text nor the Flashblock click-to-play button, just blank lines where the headings should be.

    Without Flash enabled, the headings on the page simply don't show up at all. I don't know whether they have anything in place to detect devices that don't run flash at all (e.g. iOS) — I'm guessing that it is just a conflict with Flashblock that causes me to not see the alternative text that's shown before Flash loads.



  •  Well, at the first glance this site was still usable even without javascript. Or at least navigable.

    For proper contrast, see:

    http://www.maistraatti.fi/fi/maistraatit/Lansi-Suomen-laani/Vaasan-maistraatti/Vaasan-yksikko/

    On this page, you can not scroll down without javascript. And that's actually the only thing it uses javascript for, as far as I can see. I figure their page template has some height set in stone and they unset it in javascript. Way to go, government (that's the local magistrate's opening hours page).



  • @The123king said:

    Do we use transparent images? Or HTML?

    Nahhhh.... Lets use flash!
     

    It's just a site that hasn't been updated in years. Back when browsers didn't have all that fancy font support, this was a common standard technique.

    We are in fact doing a redesign right now for an old client with a font of their own, and we are all glad that we can leave behind the sifr awfulness.



  • It looks like SIFR fixed some bugs. It's no longer possible (in Chrome at least) to have two selections active at once, which was my biggest gripe about it in the past. It's still impossible to drag a single selection from "contact us" to "by using the store finder", because the selection breaks at the gap between SIFR and non-SIFR text. And to petty it up a bit: the SIFR selection doesn't use the OS selection color.

    Although it appears visually to work in Firefox, it will actually remove the SIFR portion of the selection if you try to actually *do* anything with the text, like Copy it. (Although strangely, it seems to actually put the correct text in the clipboard.) Ugh. It's also possible, in Firefox, to get fun selections like this one if you mouse fast enough. Whee. Note the SIFR selection doesn't use the OS selection color in Firefox either.

    So it's still 100% broken and wrong.



  • At this point, SIFR is stupid. @fontface is so universally supported, and there's so many fonts available for free, or with a cheap-ish typekit subscription.



  • @gu3st said:

    At this point, SIFR is stupid.
     

    I agree with the house troll.

     Addendum:

    SIFR was pretty stupid back in the day as well, but it kinda sorta did the job.



  • @blakeyrat said:

    (Although strangely, it seems to actually put the correct text in the clipboard.)

    So it's still 100% broken and wrong.

    it doesn't on Chrome either

    @dhromed said:

    @gu3st said:

    At this point, SIFR is stupid.
     

    I agree with the house troll.

     Addendum:

    SIFR was pretty stupid back in the day as well, but it kinda sorta did the job.

    What does SFIR do that transparent PNGs (or even, heaven forbid, GIFs) doesn't?



  • @The123king said:

    What does SFIR do that transparent PNGs (or even, heaven forbid, GIFs) doesn't?
     

    - autoconversion of any string, including color.

    - it stays text, i.e copyable

    - it zooms



  • @OldCrow said:

    On this page, you can not scroll down without javascript.
     

    I can only say "Wow".

    I think I'd need quite a lot of trial and error to get to break scrolling if I wanted to. At least, now I know how to do that...



  • @dhromed said:

    SIFR was pretty stupid back in the day as well, but it kinda sorta did the job.
     

    Back in the time it was better to left the job undone than using that abomination.



  • @Daniel Beardsmore said:

    I was wondering what you were on about until I remembered that I use Flashblock! I get neither text nor the Flashblock click-to-play button, just blank lines where the headings should be.

    Without Flash enabled, the headings on the page simply don't show up at all. I don't know whether they have anything in place to detect devices that don't run flash at all (e.g. iOS) — I'm guessing that it is just a conflict with Flashblock that causes me to not see the alternative text that's shown before Flash loads.

    Shumway displays a black placeholder element before it successfully finishes loading the SWF and displays... nothing.


  • @gu3st said:

    At this point, SIFR is stupid. @fontface is so universally supported, and there's so many fonts available for free, or with a cheap-ish typekit subscription.

    Yes, sIFR is mostly unnecessary at this point. However, many font licenses don't allow for @font-face usage. Depending on corporate brand standards or other company requirements, picking an alternate font is likely not a privilege granted to the designer or developer.



  • @Mcoder said:

    Back in the time it was better to left the job undone than using that abomination.
     

    *raises glass*



  • @dhromed said:

    @The123king said:

    What does SFIR do that transparent PNGs (or even, heaven forbid, GIFs) doesn't?
     

    - autoconversion of any string, including color.

    - it stays text, i.e copyable

    - it zooms

    ABCDEFGHIJKLM
    NOPQRSTUVWXYZ
    abcdefghijklm
    nopqrstuvwxyz
    1234567890


  • Considered Harmful

    @anotherusername said:

    @dhromed said:

    @The123king said:

    What does SFIR do that transparent PNGs (or even, heaven forbid, GIFs) doesn't?
     

    - autoconversion of any string, including color.

    - it stays text, i.e copyable

    - it zooms

    ABCDEFGHIJKLM
    NOPQRSTUVWXYZ
    abcdefghijklm
    nopqrstuvwxyz
    1234567890

    BURN THE WITCH!



  • @joe.edwards said:

    @anotherusername said:
    @dhromed said:

    @The123king said:

    What does SFIR do that transparent PNGs (or even, heaven forbid, GIFs) doesn't?
     

    - autoconversion of any string, including color.

    - it stays text, i.e copyable

    - it zooms

    ABCDEFGHIJKLM
    NOPQRSTUVWXYZ
    abcdefghijklm
    nopqrstuvwxyz
    1234567890

    BURN THE WITCH!
    I originally wanted to use the background-image property, but these forums apparently don't allow it so I had to fudge it with a separate image and a negative margin. (Note that for text that looks good if you zoom really far in, you need a higher-res source image which I was too lazy to create.)



  • @anotherusername said:

    ABCDEFGHIJKLM
    NOPQRSTUVWXYZ
    abcdefghijklm
    nopqrstuvwxyz
    1234567890

     

    You've created something even worse than Sifr, with all the drawbacks of both worlds.

     



  • @dhromed said:

    @anotherusername said:

    ABCDEFGHIJKLM
    NOPQRSTUVWXYZ
    abcdefghijklm
    nopqrstuvwxyz
    1234567890

     

    You've created something even worse than Sifr, with all the drawbacks of both worlds.

     

    I was under the impression that "doesn't work without Flash" was one of the drawbacks of Sifr.



  • @dhromed said:

    @gu3st said:

    At this point, SIFR is stupid.
     

    I agree with the house troll.

     Addendum:

    SIFR was pretty stupid back in the day as well, but it kinda sorta did the job.

    There was in at least 2008, Cufon. Cufon worked on IE6+ perfectly and didn't seem to affect page loading times significantly and required single JS library, worked with jQuery. It used SVG for fonts on Firefox, Chrome etc and whatever IE used at the time ... it was kinda like CSS3PIE but for fonts and it was awesome.



  • @lucas said:

    @dhromed said:

    @gu3st said:

    At this point, SIFR is stupid.
     

    I agree with the house troll.

     Addendum:

    SIFR was pretty stupid back in the day as well, but it kinda sorta did the job.

    There was in at least 2008, Cufon. Cufon worked on IE6+ perfectly and didn't seem to affect page loading times significantly and required single JS library, worked with jQuery. It used SVG for fonts on Firefox, Chrome etc and whatever IE used at the time ... it was kinda like CSS3PIE but for fonts and it was awesome.

    SVG is great but you can't copy and paste the text then. Or did it overlay invisible text on top?

Log in to reply