Edit in JSFiddle

<link href="https://fonts.googleapis.com/css?family=Comfortaa|Maven+Pro|Roboto|Share+Tech|Ubuntu" rel="stylesheet">

<div class="sample01">
  <dl>
    <dt>Default</dt>
    <dd>MeはCatである。Nameはまだ無い。どこでbornしたかとんとno idea。何でもdarkでdampな所ではmeowとcryしていた事だけはremeber.</dd>
  </dl>

  <dl style="font-family: Roboto; font-weight: 400">
    <dt>Roboto</dt>
    <dd>MeはCatである。Nameはまだ無い。どこでbornしたかとんとno idea。何でもdarkでdampな所ではmeowとcryしていた事だけはremeber.</dd>
  </dl>

  <dl style="font-family: Ubuntu; font-weight: 400">
    <dt>Ubuntu</dt>
    <dd>MeはCatである。Nameはまだ無い。どこでbornしたかとんとno idea。何でもdarkでdampな所ではmeowとcryしていた事だけはremeber.</dd>
  </dl>

  <dl style="font-family: Comfortaa; font-weight: 400">
    <dt>Comfortaa</dt>
    <dd>MeはCatである。Nameはまだ無い。どこでbornしたかとんとno idea。何でもdarkでdampな所ではmeowとcryしていた事だけはremeber.</dd>
  </dl>

  <dl style="font-family: Maven Pro; font-weight: 400">
    <dt>Maven Pro</dt>
    <dd>MeはCatである。Nameはまだ無い。どこでbornしたかとんとno idea。何でもdarkでdampな所ではmeowとcryしていた事だけはremeber.</dd>
  </dl>

  <dl style="font-family: Share Tech; font-weight: 400">
    <dt>Share Tech</dt>
    <dd>MeはCatである。Nameはまだ無い。どこでbornしたかとんとno idea。何でもdarkでdampな所ではmeowとcryしていた事だけはremeber.</dd>
  </dl>
</div>
body {
  padding: 10px;
  font-size: 12px;
  overflow: auto;
}

.sample01 dl {
  margin-top: 30px;
}
.sample01 dl dt {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0.2em 1em;
  border-radius: 100px;
  background: #333;
  color: #fff;
  line-height: 1;
}