How to use the header:

The header is coded as a web component. The HTML is meant to be hand-edited, particularly to suit the links needed for a given nav structure. It is wrapped in a <wpt-header></wpt-header>.

The header has two external dependencies:

• Place these references in the head. Be sure the script has a defer attribute.

  
  <link rel="stylesheet" href="https://webpagetest.org/assets/css/wpt-header.css">
  <script src="https://webpagetest.org/assets/js/wpt-header.js" defer></script>
                  

• Fonts: if the site does not already load the Open Sans font, you can get it here on our domain:

  
  <style>
      @font-face {
          font-family: 'Open Sans';
          src: url('https://webpagetest.org/assets/fonts/opensans-light-webfont.woff2') format('woff2'),
                  url('https://webpagetest.org/assets/fonts/opensans-light-webfont.woff') format('woff');
          font-weight: 300;
          font-style: normal;
          font-display: swap;
      }
      @font-face {
          font-family: 'Open Sans';
          src: url('https://webpagetest.org/assets/fonts/opensans-regular-webfont.woff2') format('woff2'),
                  url('https://webpagetest.org/assets/fonts/opensans-regular-webfont.woff') format('woff');
          font-weight: 500;
          font-style: normal;
          font-display: swap;
      }
      @font-face {
          font-family: 'Open Sans';
          src: url('https://webpagetest.org/assets/fonts/opensans-bold-webfont.woff2') format('woff2'),
                  url('https://webpagetest.org/assets/fonts/opensans-bold-webfont.woff') format('woff');
          font-weight: 700;
          font-style: normal;
          font-display: swap;
      }
  </style>