Snippets > HTML and CSS > Google Web Fonts

A wise man can learn more from a foolish question than a fool can learn from a wise answer.

CSS

@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap');

.demo-wrap {
  margin: 0 auto;
  max-width: 500px;
  padding: 3em 2em 4em 3em;
}

.demo-content-bg {
  border-radius: 100%;
  width: 340px;
  height: 340px;
  color: rgba(0, 0, 0, 0.90);
  background: rgba(255, 174, 54, 0.6);
  outline: 14px dotted rgba(255, 255, 255, 0.6); 
  outline-offset: 6px;
}

.demo-content {
  font-family: "Henny Penny", cursive;
  font-size: 30px;
  line-height: 1em;
  padding: 80px 60px 60px 60px;
  text-align: center;
}


HTML

<div class="demo-section">
<div class="demo-wrap">
<div class="demo-content-bg">
<div class="demo-content">
A wise man can learn more from a foolish question
than a fool can learn from a wise answer.
</div>
</div>
</div>
</div>