![]() ![]() Degraded Visual QualityĪll modern browsers and operating system employ anti-aliasing on text to some degree. This also means that every time you update your font, you need to invalidate your visitor's cache of the assets and force them to re-download them. Maintaining an icon font means adding and removing icons as necessary to keep the size of the font, and subsequent stylesheets, to a minimal. This will degrade your visitor's experience by increasing load times and extending FOUC. If your icon font contains 200 icons and you use 10 of them, you are forcing your visitors to download 190 icons that they'll never see. That fact alone makes icon fonts difficult, and rather annoying, to maintain. Every time a visitor downloads your icon font, they are downloading every icon you intend to use anywhere on your site, regardless if they see them all or not. By themselves, these icons don't provide any semantical information about their contents You cannot label them or describe them directly. For example, an "x" for "close" or a house for returning "home". However, there are many times in which an icon is used as the primary focus. For icon fonts, this makes sense as long as the icon is being used contextually with another element. Semantically, the ::before and ::after pseudo-elements are meant to add cosmetic content to an existing element. OpenDyslexic) will cause your icons to be replaced and disappear completely, potentially leaving your web site unusable.Ĭannot provide metadata - The process of implementing an icon font on the web requires the use of the ::before or ::after pseudo-elements. If your site relies on icons in a non-contextual way, someone using an assistive font (e.g. This might include changing color schemes, increasing font size or weight, or even changing the font face completely. Stylesheet overrides - Those with visual impairments often use custom stylesheets to override default styles of the websites they visit to make them easier to use. Most screen readers will read aloud text inserted via CSS, so when they come across your icons they may say "unpronounceable," or they may be skipped entirely. Screen readers have become increasingly smarter over the years, but they still have a hard time discerning what is legible text and what is a pictogram. Treated like text - The browser treats fonts like text because that is what fonts are supposed to be. Icon fonts are notoriously bad for accessibility and can lead to some frustrating experiences for those who rely on assistive technologies. However, this does not solve all the other issues defined in this article and is not recommended. Note: It is possible to use newer directives, such as preload, on font resources to avoid FOUC. However, if they do not, it is possible that random characters or glyphs will appear in place of your icons before the font is fully loaded. Icon fonts typically assign their glyphs to codepoints outside of the normal range that most normal fonts operate in. These flashes can be very jarring to your visitors. This results in a flash of unstyled content (FOUC). While waiting for the font asset, the browser will choose to display the textual content of the HTML before actually receiving it. How long it takes to retrieve the font can depend on the size of the font asset, network conditions, and user hardware. When a linked font is found, the request is fired. When the browser begins parsing the HTML and all linked files referenced in the markup, it is building the Document Object Model (DOM) in realtime. This request isn't immediately dispatched either. When utilizing you are instructing the browser to make an HTTP request for the required font file. Flawed Icon Fonts Flash of Unstyled Content (FOUC) And now, with full SVG support at our disposal, it's time to put a stop to their use, once and for all. Considering that real SVG support across all major browsers didn't become stable until early 2020, icon fonts were the defacto way to add vector-based icons on your web site.īut icon fonts on the web were fundamentally flawed from the beginning. ![]() This gave birth to the idea that fonts composed of pictograms, like Wingdings, could be used in place of raster images on the web. By 2011, all major browsers supported it. The introduction of the CSS at-rule allowed web designers to specify custom fonts with which to display text. ![]() However, it would be nearly 22 years later before icon fonts would become a design trend on the internet. Just one year before the first web page went live in 1991, Microsoft began shipping perhaps the most well-known icon font, Wingdings. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |