4 ms·
Omg just disabling custom fonts in Firefox speeds up the internet so much!
by philliphaydon 4y ago
Omg just disabling custom fonts in Firefox speeds up the internet so much!
- blep_ 4y agoI wish I could do this without breaking all the obnoxious sites that use fonts for icons. Someone should invent an HTML tag for putting images on a page.
- tastemykungfu 4y agoA lot of icon frameworks are moving to SVG embedded on the page. Better usability - compared to the lazy fontawesomes out there.
- manmal 4y agoFontawesome is also available as SVG.
- cuu508 4y agoI'm using icon font to show a grid of icons, where each icon can be clicked to toggle it "on" or "off". Example: https://i.imgur.com/EHYHVDw.png https://i.imgur.com/EHYHVDw.png When I was implementing this, I initially experimented with the img tags – easy to implement, easy to have multi-color icons. But the grid can potentially have 100s of rows, potentially resulting in 1000+ of img tags. When testing with img tags, my site became noticeably sluggish (on a quick desktop PC). With icon fonts, the icon grid is basically lines of text, and the browser can render it with no noticeable performance impact.
- 8n4vidtmkvmk 4y agoi too use an icon font, but if you want images you should use a spritemap. it shouldn't be sluggish.
- EGreg 4y agoI write a framework, not an app. In any event, I need to allow others to style my icons with their own colors. Hence I use a font. Is there a way to use SVG sprites or something, while also letting people control the stroke color with css? Seems yes: dont put CSS in the svg. But why not just use a font? https://stackoverflow.com/questions/37940282/changing-the-stroke-color-for-an-inline-svg https://stackoverflow.com/questions/37940282/changing-the-st...
- kroltan 4y agoIf you can create a customized font file that is tiny and only has the icons you actually use, sure. But the "wrong tool for the job" point still stands, users with custom fonts disabled (for performance or accessibility reasons) will not be able to see your icons.
- easrng 4y agoSVG with <use> tags should work perfectly.
- 8n4vidtmkvmk 4y agoYes, you can even put `color: currentColor` in your SVG file and then color it exactly the same way as your fonts (it'll use the current text color). Why not? I don't know, you're asking the wrong person, I use a CSS font too. My reasons are (a) last time I looked into putting SVGs into a sprite-map to avoid 1000 HTTP requests it was a shitshow (not well supported), and (b) Chrome and other browsers would sometimes align the SVG on a half-pixel causes the edges to be a little blurry, whereas fonts get special treatment to ensure they are crisp. That was years ago tho.
- deleted 4y ago[deleted]
- philliphaydon 4y agoI just accept some things break for icons, but hovering over usually shows what the button is. The only annoying thing about turning off fonts is the weird settings ProtonMail and GitHub use. https://prnt.sc/zoPQiiPKIeZy https://prnt.sc/zoPQiiPKIeZy
- throwaway563 4y agohow do you disable fonts? Plugins?
- soperj 4y agouBlock Origin has that option.
- philliphaydon 4y agoCan check the comment from hiyer, that's all I did. Just be aware sites that use fonts for icons will look a bit weird.
- UI_at_80x24 4y agoabout:config gfx.downloadable_fonts.enabled (set to false)
- hiyer 4y agoThanks for the tip! For others wondering how you can do this, go to Settings -> Fonts -> Advanced, and uncheck "Allow pages to choose their own fonts...".
- UI_at_80x24 4y agoAfter reading this fine tip, I did the same thing. Thank-you for the suggestion. For others wondering how: about:config gfx.downloadable_fonts.enabled (set to to FALSE)