Quick Example & Demo

<style>
  @font-face {
    font-family: SegoeUI;
    src:
      local("Segoe UI Light"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format("woff2"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format("woff"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format("truetype");
    font-weight: 100;
  }

  @font-face {
    font-family: SegoeUI;
    src:
      local("Segoe UI Semilight"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format("woff2"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format("woff"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format("truetype");
    font-weight: 200;
  }

  @font-face {
    font-family: SegoeUI;
    src:
      local("Segoe UI"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format("woff2"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format("woff"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format("truetype");
    font-weight: 400;
  }

  @font-face {
    font-family: SegoeUI;
    src:
      local("Segoe UI Semibold"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format("woff2"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format("woff"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format("truetype");
    font-weight: 600;
  }

  @font-face {
    font-family: SegoeUI;
    src:
      local("Segoe UI Bold"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format("woff2"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format("woff"),
      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format("truetype");
    font-weight: 700;
  }
  
  * {font-family: 'SegoeUI'; font-size: 30pt;}
  .w-100 {font-weight: 100;}
  .w-200 {font-weight: 200;}
  .w-400 {font-weight: 400;}
  .w-600 {font-weight: 600;}
  .w-700 {font-weight: 700;}
  code {font-family: monospace; font-size: 0.85em; border: 1px solid #ccc; padding: 3px 5px; border-radius: 4px; background-color: #f5f5f5;}
</style>

<p>Hello Praveen Kumar, I'm Segoe UI.</p>

<p class="w-100">Hello Praveen Kumar, I'm Segoe UI with a weight of <code>100</code>.</p>
<p class="w-200">Hello Praveen Kumar, I'm Segoe UI with a weight of <code>200</code>.</p>
<p class="w-400">Hello Praveen Kumar, I'm Segoe UI with a weight of <code>400</code>.</p>
<p class="w-600">Hello Praveen Kumar, I'm Segoe UI with a weight of <code>600</code>.</p>
<p class="w-700">Hello Praveen Kumar, I'm Segoe UI with a weight of <code>700</code>.</p>

Demo: JSBin

Back to Amazing Web Fonts from Praveen's Collection