1. 8
  1.  

  2. 7

    For a whole bunch of reasons SVG is preferable to icon fonts, so I wouldn’t recommend that as a use-case.

    1. 6

      I completely block web fonts with a uBlock Origin/Adblock Plus filter. Icon fonts make it a bit harder, but I’ve managed to find a way to allow most icon fonts while disallowing all other web fonts.

      ! Block all fonts except icon fonts
      ! (Make sure security.csp.enable is true!)
      *$font
      @@/\/[^\/]*?[Ii]con[^\/]*?\.[^\/]*$/$font
      @@/\/[^\/]*?awesome[^\/]*?\.[^\/]*$/$font
      @@/\/[^\/]*?material[^\/]*?\.[^\/]*$/$font
      @@/materialicons.*\.[^\/]*$/$font
      @@/\/fa-[^\/]*?\.[^\/]*$/$font
      @@/\/[^\/]*-fa-[^\/]*?\.[^\/]*$/$font
      @@/\/docons.[^\/]*?\.[^\/]*$/$font
      @@/\/icomoon\.[^\/]*$/$font
      @@/fontello\.[^\/]*$/$font
      @@/fontello\/font\/b2\.[^\/]*$/$font
      @@/ss-standard\.[^\/]*$/$font
      @@/ss-social-circle\.[^\/]*$/$font
      @@/porto\.[^\/]*$/$font
      *$csp=font-src http: https:
      @@||invidio.us$csp=font-src http: https:
      @@||tradera.com$csp=font-src http: https:
      
      1. 1

        What’s the reason for blocking web fonts?

        1. 2

          Basically, the vast majority of them are not my taste. I think that is reason enough to disable them, but I have some additional personal reasons. I usually use a CRT monitor, on which anti-aliasing isn’t needed as much, so I have it disabled; many web fonts simply break without anti-aliasing. Furthermore, I often switch between different resolutions, and I make heavy use of my browser’s zoom feature; many web fonts don’t support the small sizes I want to view them at.

          All of this makes it easier to just disable them entirely. I’m not against web fonts in principle, it’s just that they don’t work for me. Don’t get me started on icon fonts, though…

      2. 2

        As there are four major font file’s formats WOFF2, WOFF, EOT y TTF and unfortunately none of them is universally accepted by all browser

        WOFF looks pretty universally supported to me

        1. 3

          Yes, almost all browsers and systems accept it. With one exception, Opera Mini.

          1. 3

            WOFF2 looks also fine for me.

          2. 1

            The use of web fonts makes the website look the same for everyone, gives a lot more options to the webmaster, but nothing is free, and the cost is website performance.

            The cost is trampling on your users font choices.

            1. 3

              Of the few users for whom this might be an issue, I’d imagine most are quite capable of overriding the stylesheet.

              1. 1

                Yeah, and that means for people who do adjust their font sizes for accessibility reasons, this is untested. Leaving this stuff untested means that text overflows and wraps strangely, and leads to a suboptimal user experience.

                1. 3

                  I think that’s a bit of a stretch. Unless you’re doing something very strange, text will usually flow just fine. How are you imagining that designers would test every possible font that a system might select anyway? You should always set a fallback like sans-serif, and depending on the system that could be literally anything (not to mention that text rendering can be inconsistent between browsers and platforms even with the same font). Again, unless you’re doing something strange or complex, I don’t think that’s going to lead to any major problems anyway. Whether you’re using web fonts or not, you should design for some level of flexibility.

                  1. 3

                    Most of the problems come from something having a width: 200px or some such, which just fits with the assumed font(s) but won’t fit if you substitute it with a font that’s slightly wider. It’s a problem in some dialogs on Stack Overflow for example (or was, anyway, I think it’s fixed now).

                    This is hardly a web font problem; I use DejaVu Sans instead of Arial for example, which is slightly wider and very occasionally things break on some websites. It’s just the price you pay for frobbing with this kind of stuff.

                    1. 1

                      There’s a few spots in Slack (yes, I use Slack in Firefox) has an issue where the timestamp on individual messages line wraps. Luckily, nothing is cut off, but it does result in single-line messages that take up two lines because the 10:00 PM takes up two lines of its tiny cell.

                  2. 2

                    Unless you’ve carefully specified aliases for all “web-safe” fonts it’s not like you’re in “full control” anyway. I would wager that a vanishing small amount of people do this.

                    Either way, for most cases it’s not too hard to make sure that $any font works. I use web fonts on my site and my product and you can swap them out with $preferred_font and everything should still work fine.

                    1. 1

                      Firefox has a toggle to disable web fonts entirely. Chrome has an extension.

                2. 2

                  I’d be willing to bet that the vast majority of users have never set a font preference in their browser. I certainly never have, and I don’t know anyone who has.

                  1. 1

                    I had to bump up the font size in order to read some pages. My eyes are better than some, but not what they used to be when I was 20.

                    I really wish that browsers picked up the system font settings, though.