[{"data":1,"prerenderedAt":205},["ShallowReactive",2],{"project-8803139":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":41,"post_text":43,"what":44,"said":70,"maker_in_thread":127,"shape":136,"grid":139,"attempts":165,"same_week":166,"maker_shows":196,"maker_hidden":197,"reader_version":198,"card":199},"8803139","webfont-dl","Download and inline Google web fonts from the command-line","title","Show HN: Download and inline Google web fonts from the command-line","https:\u002F\u002Fgithub.com\u002Fmmastrac\u002Fwebfont-dl","github.com","mmastrac",1419700423,2014,64,13,493,2272,22,"notable","dev_tools","web font tooling","cli",[24,25,26,27,28],"google fonts","webfont","font inlining","base64 data url","web performance","curious",0.154,{"positive":32,"neutral":33,"mixed":34,"critical":35},2,3,1,0,6,{"idea":38,"execution":39,"performance":40},{"positive":32,"critical":35},{"positive":35,"critical":35},{"positive":35,"critical":35},[42,35,33,35,35,35,35,33,33,35,42,33,35],5,null,{"problem":45,"audience":55,"pricing":43,"motivation":60,"time_to_build":43,"stack":64,"openness":69,"stage":69,"team_size":69},{"value":46,"source":47,"evidence":48},"Flash of invisible text and extra round trips when loading Google web fonts","maker",[49,52],{"id":50,"by":11,"text":51},"8803151","I've been fighting the flash of invisible content problem while using Google's web fonts on Safari, so I bit the bullet and built a command-line tool that would both 1) host them…",{"id":53,"by":11,"text":54},"8803346","The fonts themselves are cached for a \"long time\", but the CSS that links the font to a @font-face declaration expires far more frequently (ie: less than a day). In my testing on…",{"value":56,"source":57,"evidence":58},"Web developers using Google web fonts","inferred",[59],{"id":50,"by":11,"text":51},{"value":61,"source":47,"evidence":62},"Fix flash of invisible content on Safari and reduce font CDN round trips",[63],{"id":50,"by":11,"text":51},[65],{"value":66,"source":47,"evidence":67},"npm package (Node.js)",[68],{"id":50,"by":11,"text":51},"unknown",{"praise":71,"objections":80,"requests":89,"questions":94,"alternatives":115},[72],{"value":73,"source":74,"evidence":75},"Inlining fonts as data URLs is an interesting approach to avoid flash","commenter",[76],{"id":77,"by":78,"text":79},"8803752","deanclatworthy","I was aware of the technique of hiding the body, but that for me is unacceptable. It causes further delays to get content on the page. This inlining of the fonts is quite…",[81,85],{"value":82,"source":47,"evidence":83},"Inlining fonts increases first-request payload size",[84],{"id":53,"by":11,"text":54},{"value":86,"source":74,"evidence":87},"Hiding body until font loads delays content",[88],{"id":77,"by":78,"text":79},[90],{"value":91,"source":74,"evidence":92},"Way for clients to cache webfonts by checksum",[93],{"id":77,"by":78,"text":79},[95,101,108],{"value":96,"source":74,"evidence":97},"Does inlining actually avoid the flash of invisible text?",[98],{"id":99,"by":78,"text":100},"8803683","Is it really so that inline fonts avoids the flash? I have not read this anywhere until now. Source?",{"value":102,"source":74,"evidence":103},"Does browser cache get shared across sites using the same Google font?",[104],{"id":105,"by":106,"text":107},"8803271","hubot","I'm curious. If visitors visit a site using a font served by Google fonts and visit another using the same font, will it use the cache from the browser? because if yes, then i…",{"value":109,"source":74,"evidence":110},"What are the font licensing implications of redistribution?",[111],{"id":112,"by":113,"text":114},"8803345","Joe8Bit","Does anyone know what implications this has on licensing of the fonts? I assume there's a restricted redistribution clause for some of the fonts",[116,120],{"value":117,"source":74,"evidence":118},"Loading Google fonts directly from Google's CDN",[119],{"id":105,"by":106,"text":107},{"value":121,"source":74,"evidence":122},"Hand-made OpenSans.css inlining script",[123],{"id":124,"by":125,"text":126},"8803628","steakejjs","I got tired of using font CDNs, didn't like extra round trips for the woff files, and I also really liked open-sans, so I made an OpenSans.css which inlines all the OpenSans…",{"comments":42,"answered":33,"key":128},[129,132,133],{"id":130,"text":131},"8804467","One thing you might want to consider is just using the same family for each of those versions of the font, rather than using the same name as the font file, per this article:…",{"id":50,"text":51},{"id":134,"text":135},"8803716","It avoids the flash by effectively blocking load. It's not documented, but you can infer it: ``` - CSS blocks rendering until download [1] - Inlining a font in CSS makes it part…",{"commenters":36,"max_depth":137,"maker_replies":42,"first_comment_mins":32,"lifespan_hours":138},4,7,[140,142,146,149,151,153,154,156,158,159,160,162,163],[124,35,42,141,125,35],"project\u002Fpositive\u002Fidea",[143,35,35,144,145,35],"8804186","commenter\u002Fneutral\u002Fnone","danieltillett",[147,35,33,148,125,35],"8804195","project\u002Fneutral\u002Fexecution",[130,35,35,150,11,34],"project\u002Fpositive\u002Fexecution",[50,34,35,152,11,34],"project\u002Fneutral\u002Fidea",[99,34,35,144,78,35],[134,34,35,155,11,34],"project\u002Fneutral\u002Fperformance",[77,34,33,157,78,35],"project\u002Fmixed\u002Fperformance",[105,32,33,155,106,35],[53,32,35,155,11,34],[161,32,42,141,106,35],"8803385",[112,33,33,152,113,35],[164,33,35,152,11,34],"8803364",[],[167,172,177,182,186,191],{"id":168,"name":169,"points":170,"category":171},"8797155","H2O",251,"infrastructure",{"id":173,"name":174,"points":175,"category":176},"8809477","Hacker News",128,"consumer_social",{"id":178,"name":179,"points":180,"category":181},"8813313","LambdaNet",56,"ai",{"id":183,"name":184,"points":180,"category":185},"8813867","#Startup","web_saas",{"id":187,"name":188,"points":189,"category":190},"8818870","crossfeed",51,"languages",{"id":192,"name":193,"points":194,"category":195},"8796263","Orthogami",49,"creative",8,false,"v2",{"id":200,"name":5,"line":6,"ai":197,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":201,"top":18,"kw":202,"maker":11,"domain":10,"tier":19,"attempts":35,"strip":203,"url":9,"mix":204,"praise":73,"objection":82,"sub":21},8803139,0.15,[24,25,26,27,28],"5030000330530",[32,33,34,35],1794036526479]