docs - content in Troubleshooting

_posts/docs/2010-12-11-troubleshooting.mdown

@@ -7,9 +7,13 @@ related: etc
 
 ---
  
-## Images
+## Unloaded Content
+ 
+Most layout modes (i.e masonry, fitRows) need to measure the size of each item to appropriately account for its space in the layout. Unloaded content like images and @font-face fonts can throw off layout and cause item elements to overlap one another. Ideally, Isotope layouts should be initialized after all inner content has loaded.
+ 
+### Images
 
-Most layout modes (i.e masonry, fitRows) need to measure the size of each item to appropriately account for its space in the layout. Unloaded images can cause item elements to overlap one another. Isotope layouts should be initialized after all inner content has loaded. For images, the best method is to specify the width and height of images inline.
+For images, the best method is to specify the width and height of images inline.
 
 {% highlight html %}
 
@@ -31,4 +35,15 @@ $(window).load(function(){
 
 {% endhighlight %}
 
+### @font-face fonts
+
+Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded. 
+
++ [Typekit font events](http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/)
++ [Google WebFont Loader: Events](http://code.google.com/apis/webfonts/docs/webfont_loader.html#Events)
+
+Additionally, you can use the `$(window).load()` pattern above to wait for all content, including @font-face fonts, to load before initializing Isotope.
+
+## Opera
+
 

index.html

@@ -77,7 +77,7 @@ layout: nil
     <li class="feature" data-category="feature" data-related="animating"><span>Captivating animations</span></li>
     <li class="feature" data-category="feature" data-related="sorting"><span>Sort items by just about anything</span></li>
     <li class="feature" data-category="feature" data-related="methods"><span>Powerful methods, simple syntax</span></li>
-    <li class="feature" data-category="feature" data-related="animating"><span>Aggressively enhanced for CSS3 transforms &amp; transitions</span></li>
+    <li class="feature" data-category="feature" data-related="animating"><span>Progressively enhanced for CSS3 transforms &amp; transitions</span></li>
     {% for doc in site.categories.docs reversed %}
       <li class="doc" data-category="doc" data-related="{{ doc.related }}"><a href=".{{ doc.url }}">Docs: {{ doc.title }}</a></li>
     {% endfor %}