While we are discussing web fonts, I think I should point out my Chrome extension that disables Web Fonts on all websites (or tries to). Uses Request filters, and I made it because I was trying to minimise bandwidth usage on a metered EDGE connection long time back. (Opera Turbo is best for that, but Chrome is a better browser).
Yes. You get a long series of squares (maybe with hex codes if you're lucky) instead of icons. I try to avoid using such sites when possible. (this notably includes github and twitter).
I liked this comment [1] from earlier: Use ligatures. That way, a meaningful text could be displyed when the font is not loaded, but fuses into a symbol with the appropriate font.
There is a switch in Chromium where one can disable remote fonts entirely. Obviously not for the average user, and more of a power-user thing, but still handy:
--disable-remote-fonts
You can find a tonne of other optimizations you can do to Chromium here: peter.sh/feed/chromium-command-line-switches
Also if you want fonts that load faster than Google Wenfonts, have a look at http://brick.im/
I use Brick on a tonne of different side projects, and there is a marked decrease in loading time. Brick uses Fastly, which is (arguably) a faster CDN than Google Webfonts and other webfont initiatives like Adobe Webfonts.
Also using Brick is another chance to ban Google from your web traffic as many are doing...Google is like a barnacle that is stuck to the web and is hard to remove entirely without them slurping some of your data
Unfortunately, this is a Tragedy of the Commons issue, where the ever-expanding list of webfont hosts results in a detrimental experience for users, where otherwise a single popular host would result in a much higher likelihood of cache hits.
Not saying you shouldn't use the best solution for you. In fact, I ship code that hits the Hoefler & Co. webfont CDN because it's the only source for the fonts we use.
The OP mentions font loading starts as soon as a .css directive using the font is encountered, which makes me think the initial html page load could include a tiny snippet of .css with the font defs and a dummy styling instruction that use the font. The idea is to load the rest of the .css in parallel with the .woffs. Would this work?
I guess prefetch does exactly that, but wondering if the "hack" would work.
That seems worth pursuing. I'd want to verify that when the font is loaded this way, it's loaded async, and doesn't stop further asset loading until complete. Or else it might not be a great solution.
Can we not have a way to count, the most used Javascript, and Web Front in the most popular worldwide 500 Website in one And these will always be cached by one Repository, and all browser maker will constantly check and update a same copy of cache within the users computer?
Not a bad thought. But I wonder if the "political problems" would be too much to overcome. For example, I'm sure some of those most-popular fonts require a license, and I don't know how TypeKit/fonts.com/etc would work if those weren't hosted from their own servers.
We could leave out the non-free stuff for a start. What other political problems are there?
In a perfect world, these most popular website would have their Script and Fonts in CDN and be cached already. But what we are seeing is that still lot of the same stuff used around still not being cached.
I've found the performance of web fonts to become more of a problem over the past year or so, I guess this is as their popularity has increased.
1. Privacy
It's well known that companies such as Google and Adobe use web fonts to track users that may not even (knowingly) be their customers.
2. Performance
Just last week I logged a bug with our developers when our monitoring started picking up that one of their staging / demo sites was taking a long time to render, turns out they were using a web font provided by Hoefler & Co's 'typography.com' which is incredibly slow to load, here's the waterfall of the page load: http://i.imgur.com/riNT3hH.png
I also have the same feeling that thin fonts look ugly on my humble LCD screen with dismal resolution and low ppi.
I was once complaining to a friend how ugly site X is and he said it looked right to him; later when I saw his machine it has a nice display that made site X look twice as better on my shitty display.
Lots of sites are designed on (and for?) high density displays and it ends up looking awful on low resolution screens like mine.
It's baffling for me that designers/coders don't realize that desktop and laptop display panels are probably the first thing a manufacturer will look at when it comes to cutting some corners and lowering the overall price of the product.
Also most 'normal' users will never pay the x4-x10 premium price for some fancy IPS display and calibrate its colors.
I tried to look into this once, and I _think_ Google's license for the free fonts, allows you to download all the font assets and serve them yourself if you want too. If you want to trade the convenience of google hosting for your own local hosting (or more likely your own CDN), to avoid tracking and have your own control of performance.
But I wasn't even completely sure I was reading Google's licenses right (and I don't have notes to track what docs I was looking at, sorry), and then other hosts like Adobe are another thing entirely.
Now there is a story... On the website I work on we had some horrid typography.com font loaded, which was theoretically a good idea, once upon a time. Since this is a legacy site I work on with whomever having worked on it before, I realised that there was no significant content using this font, in fact it was only in email templates (not that email does web fonts). So I ripped the little blighter out.
I added in some 'lookalike' fonts from Google in the places where the typography.com font should have been, all looked improved, everything worked.
But then we hire some new clowns to do some new theme. Obviously I am typecast as a 'backend dev' so I was not privy to whatever those conversations were. So the typography.com font is back in use! Fantastic (not)!!!
So the same process that led to the last awful frontend (get some agency that don't care about our product to project manage something to death) results in the reappearance of the same awful font technology.
That sir is how typography.com still get customers. The marketing people, the managers that have no technical skills, the print designer and some outside agency just do it even though (four months earlier) the only coder in the building speeded up the site and made it vaguely legible by getting rid of the silly typography.com junk.
I am very much a believer in design which is content first and, as Steve Jobs said, 'how it works'. I too like a good font and always inspect a page where the typography stands out as I like to be informed on font names and combinations. I am also a believer in going for AA accessibility. Obviously the typography.com font will be spidery grey text against a grey background, not accessible!
I'll admit I didn't know about the HTML link preload feature. This presentation does a good job at emphasizing (but hopefully not exaggerating) its effectiveness.
However, may I suggest a completely radical alternative at optimizing your webpages? Don't just avoid Web Fonts, avoid CSS altogether. Take a look at my website. Did you notice how fast it loaded, despite not using a CDN?
Of course, this is a bit tongue-in-cheek. There are many legitimate uses of styling web pages, but for websites whose purpose is simply to convey information (the main reason people were excited about the WWW in the 90's), I personally think unstyle'd, or mostly unstyled HTML is the best way to go.
So change your User Agent so the website renders the way you like. That is the entire point of HTML; the client decides how to render the page, with the HTML (and CSS) optionally providing suggestions.
In the case of this website, the author has decided to leave the question of how to render the page almost entirely to the client,
Even in the early Netscape days the Navigator browser supported setting the default font sizes and colors. These options are still available today. If you want more control over the default rendering, you may want to submit a feature request for your browser of choice, but you may be able to simply edit the default stylesheet.
> So change your User Agent so the website renders the way you like
So if I visit 100 different websites daily, and most of them are the ones I've never seen before - I will have to spend half of my life just writing stylesheets for each of them? No, thanks, It's not a world I want to live in...
Ok, do you seriously not understand what it means to be the default stylesheet? Have you ever actually changed the font setting in the browser?
I didn't say anything about writing custom stylesheet for a particular website. I said you should change your user agent so it renders html in the style you want. You do this ONCE.
Ok, do you seriously not understand what it means to not want every website you come across to look the same? (Even if it's the same of your own choosing).
Design, fashion, and art aside... how can 1 design or style even work for the entire range of websites and web apps? UX is important, and must be different depending on the goals of the site.
> Ok, do you seriously not understand what it means to not want every website you come across to look the same?
Yes. Does you get annoyed that most books have the same formatting - a style you didn't get to choose? My mother absolutely loves her kindle, because it let her do exactly what I'm talking about and apply a font that she can actually read to all books.
> how can 1 design or style even work for the entire range of websites and web apps?
Of course not. That's why HTML let you specify styling to override the default stylesheet in the cases when it is important.
More importantly, I never said anything about not styling your pages, nor did I claim one style should apply to ll pages on the internet. I replied to a post complaining about the DEFAULT STYLE. I suggested that it is the responsibility of the client to render that style as they like.
How, exactly, does this get in the way of your ability to apply formatting?
In Firefox, I see options to change font sizes and colors, but nothing to select a default stylesheet. I know it's bound to be in about:config, but it might as well not exist then. Opera had it right there in the "view" menu, changing between author and user mode took two clicks, selecting a user stylesheet took three, while it takes me four clicks in FF to realize it doesn't even have that option, and mere common sense to not even bother checking in Chrome. Progress!
Ha-ha. I initially spent quite a lot of time to make my website nicely styled, with fonts and JS. But then I decided that all those bells and whistles just not worth it and used pure HTML as you did. Probably I'll add just a little bit of styling anyway, but it works fine as of now. And it works fine on tablets and smartphones without any effort :)
People like design. People like things to not all look the same. Companies require design for their branding and marketing. To suggest that everyone's website looks the same and just be browser default styles is ignoring an enormous fact of human nature (not to mention the global economy and civilization in general).
b) HTML5 spec:
A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element.
This is not an exercise in moral justification. I'm asking if there are any browsers that fail to render documents without <html> and <body> tags. Do you have an actual answer?
This. CSS should be left to the clients and not to the servers. Just serve a plain HTML file and let the users (or their browsers) decide what to do with it.
But I still don't consider reliable FOUT a victory -- it's still annoying as a reader. I'm not sure if the final slide cross this out because his design has a solution to it, or because he decides not to consider it a problem. I _think_ the latter maybe? (Slidedeck without the accompanying narrative can be hard to interpret sometimes!). If so, I disagree, reliable FOUT with otherwise quick loading may be the lesser evil in the present environment, but it's still annoying.
Caveat: the slides indicate you can indicate prefetching via an HTTP header but in my local testing (and subsequent Googling) it appears that doesn't work in Chrome (perhaps it's Firefox-specific?).
By the way, as someone who often uses mobile connections: I will skin you alive if you hide text before the fonts loaded
Seriously. FLOUT is NOT in any way bad. Stop trying to hide the unstyled text, I don't have 20 minutes to wait for your shitty webfont to load. If you do hide your unstyled text, I'll instantly leave your website again.
[0]: http://github.com/captn3m0/disable-web-fonts
[1]: https://chrome.google.com/webstore/detail/olmabeadgbpmhllgdk...