5 ms·

iOS' Lockdown Mode blocks web fonts. Sad to see how many sites still use icon fonts instead of SVGs.

by DanAtC 4y ago

asddubs 4y ago
they do have the advantage of being easy to recolor even as an external resource. I personally don't use them and instead use SVGs and there's always the decision of whether to add a bunch of inline svgs, which you can do cool effects and even transitions on for hover effects or light/dark mode, or using external images, which are nicer in terms of separation of concerns, re-use without having to update multiple places and not having graphics buried in the source code somewhere. It would be cool if we could even just have a simple CSS filter that replaces all non transparent parts of an externally embedded image with a single color. of course there's other benefits like just having to load one file for all your icons, although the tradeoff is also that fonts are messier to update if you're doing custom stuff and not just fontawesome
- toastal 4y ago
  You can literally do all of that with SVGs sprites when the fill is set to currentColor.
  - asddubs 4y ago
    Only with inline svgs, not if they're included via <img>, I believe.
    - toastal 4y ago
      You can't inline a font as an <img> either?? There are performance benefits to <img>, but generally people recommend <use> for SVGs.
      - asddubs 4y ago
        the point I made in my original post was that a font is already an external resource and doesn't have to be intermingled with the rest of the code.
behnamoh 4y ago
The method in the article also turns Reddit's upvote/downvote buttons into squares (unknown characters).
- userbinator 4y ago
  Yet HN's vote buttons are unaffected.
bobbylarrybobby 4y ago
As someone who knows nothing about this: what is wrong with icon fonts?
- iampims 4y ago
  It’s a font, so it has to be loaded. SVGs can be inlined, so no additional, and possibly external, requests needed.
- ayushnix 4y ago
  This is how some websites with icon fonts look when web fonts are disabled https://0x0.st/oOUq.png https://0x0.st/oOUq.png (nullprogram.com) https://0x0.st/oOUb.png https://0x0.st/oOUb.png (https://developer.android.com/training/basics/firstapp https://developer.android.com/training/basics/firstapp) As someone has already pointed out, unlike web fonts, SVGs can be used as inline resources. It's not just icon fonts though, using web fonts themselves can lead to bad design practices. https://microblog.ayushnix.com/font-weight-insanity/ https://microblog.ayushnix.com/font-weight-insanity/
- megous 4y ago
  Font choice is a user's choice. https://megous.com/dl/tmp/830725ae5a555c87.png https://megous.com/dl/tmp/830725ae5a555c87.png It's a normal user modifiable choice in the browser. You're just making your webapp much less usable for users who have made that choice. And for no reason, because SVG icons work just fine and are even more flexible. Font icons are basically a hack. They have terrible fallback behavior.
antihero 4y ago
I'm not sure about browsers but in React Native, icon fonts are far more performant.

iOS' Lockdown Mode blocks web fonts. Sad to see how many sites still use icon fonts instead of SVGs.

by DanAtC 4y ago

iOS' Lockdown Mode blocks web fonts. Sad to see how many sites still use icon fonts instead of SVGs.

they do have the advantage of being easy to recolor even as an external resource. I personally don't use them and instead use SVGs and there's always the decision of whether to add a bunch of inline svgs, which you can do cool effects and even transitions on for hover effects or light/dark mode, or using external images, which are nicer in terms of separation of concerns, re-use without having to update multiple places and not having graphics buried in the source code somewhere. It would be cool if we could even just have a simple CSS filter that replaces all non transparent parts of an externally embedded image with a single color. of course there's other benefits like just having to load one file for all your icons, although the tradeoff is also that fonts are messier to update if you're doing custom stuff and not just fontawesome

toastal 4y ago
You can literally do all of that with SVGs sprites when the fill is set to currentColor.
- asddubs 4y ago
  Only with inline svgs, not if they're included via <img>, I believe.
  - toastal 4y ago
    You can't inline a font as an <img> either?? There are performance benefits to <img>, but generally people recommend <use> for SVGs.
    - asddubs 4y ago
      the point I made in my original post was that a font is already an external resource and doesn't have to be intermingled with the rest of the code.

behnamoh 4y ago

The method in the article also turns Reddit's upvote/downvote buttons into squares (unknown characters).

userbinator 4y ago
Yet HN's vote buttons are unaffected.

bobbylarrybobby 4y ago

As someone who knows nothing about this: what is wrong with icon fonts?

iampims 4y ago
It’s a font, so it has to be loaded. SVGs can be inlined, so no additional, and possibly external, requests needed.
ayushnix 4y ago
This is how some websites with icon fonts look when web fonts are disabled https://0x0.st/oOUq.png https://0x0.st/oOUq.png (nullprogram.com) https://0x0.st/oOUb.png https://0x0.st/oOUb.png (https://developer.android.com/training/basics/firstapp https://developer.android.com/training/basics/firstapp) As someone has already pointed out, unlike web fonts, SVGs can be used as inline resources. It's not just icon fonts though, using web fonts themselves can lead to bad design practices. https://microblog.ayushnix.com/font-weight-insanity/ https://microblog.ayushnix.com/font-weight-insanity/
megous 4y ago
Font choice is a user's choice. https://megous.com/dl/tmp/830725ae5a555c87.png https://megous.com/dl/tmp/830725ae5a555c87.png It's a normal user modifiable choice in the browser. You're just making your webapp much less usable for users who have made that choice. And for no reason, because SVG icons work just fine and are even more flexible. Font icons are basically a hack. They have terrible fallback behavior.

antihero 4y ago

I'm not sure about browsers but in React Native, icon fonts are far more performant.