Roboto / Source Serif Pro example

index.html

<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Source+Serif+Pro:400,700" rel="stylesheet">

<div id="example">
  <h1>Lorem, ipsum consectetur adipisicing elit. Suscipit, mollitia?</h1>
  <p class="lead">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam aperiam fuga laudantium asperiores odit! Iste laudantium corrupti sapiente, voluptatibus earum odio velit unde porro. Unde autem quos asperiores vitae iste.
  </p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, eligendi reprehenderit eos impedit, accusantium modi magni nam provident obcaecati, magnam voluptatibus veritatis repellat. Ratione repudiandae natus nihil nisi porro exercitationem consequuntur necessitatibus enim sunt labore. Cumque odit necessitatibus alias quisquam. Iure magnam, distinctio ipsum consequuntur minima corrupti, tenetur et rem veritatis quibusdam deleniti, delectus illo. Quas corporis cum ducimus iure ratione molestiae rem iste tempore mollitia pariatur reiciendis sunt eligendi incidunt ex expedita voluptatibus officiis nihil similique dolore, natus architecto <a href='#'>delectus</a>. Aliquid facere maiores labore architecto magnam expedita voluptatem, sapiente est ipsam non laborum necessitatibus asperiores cupiditate explicabo, modi debitis.</p>
  <p class="small">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae veniam delectus reprehenderit. Optio saepe sunt laborum illum. Aspernatur maxime excepturi tempore dolore, nemo eius reprehenderit at aperiam assumenda veritatis atque!
  </p>
</div>

roboto-source-serif-pro-example.markdown

Roboto / Source Serif Pro example

A Pen by Jeremy on CodePen.

License.

style.scss

body {
  padding: 2em 0;
  display: flex;
  justify-content: center;
  background: #eee;
}

#example {
  width: 70%;
  max-width: 32em;
  background: #fff;
  padding: 3em;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
  h1 {
    font-family: 'Source Serif Pro', serif;
  }
  p {
    font-family: 'Roboto', sans-serif;
    &.lead {
      font-size: 1.25em;
      font-weight: 200;
    }
    &.small {
      font-size: 0.5em;
      font-weight: 400;
    }
  }
}