CodePen

HTML

            
              <h2>
  <span>Super Sports Diner</span>
</h2>

<h2>
  <span>Different Font</span>
</h2>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Mrs+Sheppards);

body {
  padding: 20px;
  font-family: 'Mrs Sheppards', cursive;
}

h2 {
  text-align: center;
  font-size: 1.2em;
  line-height: 0.5; /* Magic Number */
  margin: 50px 0;
}
h2 span {
  background: white;
  padding: 0 15px;
  position: relative;
}
h2:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  height: 8px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

h2:nth-child(2) {
  font-family: Sans-Serif;
  font-size: 250%;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................