TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Web Fonts Performance: Making Pretty, Fast

68 pointsby igrigorikover 12 years ago

12 comments

shimon_eover 12 years ago
I have a problem with Google web fonts. Sometimes connectivity to Google is problematic. For example in China after searching the wrong keyword all connections to Google are blocked for 1.5 minutes. This leads to sites with Google web fonts not hosted locally to hang in loading as it waits for a response from Google. This has led me to hosting web fonts locally.<p>Was wondering if anyone has a better solution. Or if anyone from Google is reading this, could they place web fonts on a different domain/IP and pray that global censors don't list it?<p>Kinda nice to be able use cached versions of the fonts.<p>I only use China as an example. I have had problems with Google web fonts in other country and on bad connections.<p>edit: watching the video it sounds like by hosting locally I am not taking advantage of the different versions served to different operating systems.
评论 #4514005 未加载
评论 #4514085 未加载
评论 #4515026 未加载
moonbootsover 12 years ago
Using a nice typeface provides an incredible boost to site design. I'm a very happy user of Google Web Fonts (PT Sans and Ubuntu Mono) on my site <a href="http://typing.io" rel="nofollow">http://typing.io</a><p>Very small performance suggestion: minify the initial css!
评论 #4514975 未加载
评论 #4514798 未加载
recuterover 12 years ago
I wonder if there is a downside to letting Google act as a CDN for Web Fonts and common javascript libraries. /tinfoil hat<p>Common resources distributed to browser caches everywhere is an attractive proposition but you're also giving Google a lot of data you might not want.
评论 #4513775 未加载
评论 #4514776 未加载
评论 #4515087 未加载
cantlinover 12 years ago
Given the huge number of distinct files served by the Webfont API, I think it's fair to have some healthy scepticism regarding the client-side caching benefits this article emphasises. While I can count on all you MBP-wielding, startup-cruising hackers to be primed with Open Serif, I'm less confident about the corporate desk jockeys who are my real users. Worth noting too that using fonts because they are widely distributed is more or less exactly what we have been trying to get away from. Still, font subsets are awesome, especially if you only need alphanumeric latin characters. For example:<p><pre><code> &#60;link rel="stylesheet" href=" http://fonts.googleapis.com/css?family=Droid%20Serif &#38;text=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890., " /&#62; </code></pre> ...sends Chrome back a minuscule 8.5K worth of font. Glorious!
michaelpintoover 12 years ago
Amen on the very last line "web fonts are here to stay". I'm amazed that in 2012 I'm still working with developers who act like it's something we may want to try next year. It's time to realize that this is a technology that should have taken off ten years ago and now it's time to play catch up.
评论 #4513737 未加载
评论 #4515261 未加载
humpolecover 12 years ago
&#62;Next, the font file size can be further reduced by eliminating font hinting meta data, as some platforms do not support it.<p>Not sure if I understood that correctly... do we make the decision depending on the platform, or do we remove the hinting data <i>for all platforms</i> just to improve the compression?
评论 #4513588 未加载
aliksover 12 years ago
Please not use Google web-font is slower and harm you privacy.<p>[Google fonts] 43ms -&#62; [------&#62;] DNS 120ms -&#62; [-------] [-----&#62;] Get Css 150ms -&#62; [----------------] [----------&#62;] Get-rel woff font<p>Proof: <a href="http://fonts.googleapis.com/css?family=Skranji" rel="nofollow">http://fonts.googleapis.com/css?family=Skranji</a> --&#62; <a href="http://themes.googleusercontent.com/static/fonts/skranji/v1/Rkre06NW1995RvIlAXa7Ng.woff" rel="nofollow">http://themes.googleusercontent.com/static/fonts/skranji/v1/...</a><p>Use font squire and convert to base64_font -&#62; better faster stronger
评论 #4517059 未加载
ori_bover 12 years ago
As an end user, I set my font to what it is for a reason. Please don't mess with my settings.
评论 #4514096 未加载
评论 #4513981 未加载
评论 #4514011 未加载
评论 #4515119 未加载
newman314over 12 years ago
Side question: can HTML5 storage be used to store the downloaded fonts so as to prevent a reload should the cache be blown out at some point?<p>Or is this not even worth considering?
评论 #4514576 未加载
评论 #4515366 未加载
barlogover 12 years ago
this is the Fastest way. make a move!
tonethemanover 12 years ago
oooooh font pron.... dat ascender.
ConstantineXVIover 12 years ago
I thought of an evil hack w/ web fonts the other day. Seems it'd be fairly simple to use randomly re-sorted fonts (where characters are mapped to improper code points) as a kind of one-time-pad to jam HTML scrapers or surveillance of the line. The user's browser would get the appropriate font and be able to read the text; anyone reading the raw HTML would get gibberish, forcing anyone trying to extract the data to use OCR. Obviously this would kill your site for search engines, screen readers, etc., so the only use would be if you're seriously paranoid about your data getting scraped, and only then if the scraper had limited resources (the NSA, etc. can probably spare a few cycles for OCR).
评论 #4514300 未加载
评论 #4514254 未加载
评论 #4515092 未加载