title: When do web-fonts load and can you pre-load them?
body: <p>I've noticed when using web fonts that they can initially can take a second to come up; like if you create a drop down nav menu, when you hover over the menu for the first time the whole menu will appear as just the background color for a second and then the text will appear. </p>
  
  <p>This isn't really ideal and it leads me to believe that webfonts aren't downloaded when the CSS file is loaded, but rather when you first view them on the page.</p>
  
  <p>But on the other hand, I already have the fonts installed on my PC so they shouldn't need to be downloaded, so that lends the question on why do they do this!?</p>
  
  <p>Here is the CSS I use to load my webfonts:</p>
  
  <pre><code>@font-face {
      font-family: 'Roboto';
      src: url('../fonts/Roboto-Regular-webfont.eot');
      src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
           url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
           url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  @font-face {
      font-family: 'Roboto';
      src: url('../fonts/Roboto-Italic-webfont.eot');
      src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/Roboto-Italic-webfont.woff') format('woff'),
           url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'),
           url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
      font-weight: normal;
      font-style: italic;
  }
  
  @font-face {
      font-family: 'Roboto';
      src: url('../fonts/Roboto-Bold-webfont.eot');
      src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
           url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
           url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
      font-weight: bold;
      font-style: normal;
  }
  
  @font-face {
      font-family: 'Roboto';
      src: url('../fonts/Roboto-Light-webfont.eot');
      src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/Roboto-Light-webfont.woff') format('woff'),
           url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
           url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
      font-weight: 300;
      font-style: normal;
  }
  
  @font-face {
      font-family: 'Roboto';
      src: url('../fonts/Roboto-Medium-webfont.eot');
      src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
           url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
           url('../fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
      font-weight: 500;
      font-style: normal;
  }
  </code></pre>