How do I create a button that consists of 2 different fonts? (In my case, Montserrat & Intro Script)-CodePudding

I'm trying to design a button that consists of 2 different fonts (and an icon). I've tried W3 Schools, but they don't cover that specific example.

The fonts in the button design are Montserrat and Intro Script.

Any advice or good resources? Thanks, in advance.

Button Design Mockup

CodePudding user response：

You could put multiple spans with different styles inside a single button.

<button>
  <span style="font-family: 'Lobster';">
    Hello
  </span>
  <span style="font-family: 'Montserrat';">
    World!
  </span>
</button>

CodePudding user response：

You can wrap the text you want to make a different font in a span and then change the font for the span. You may need to play around with the vertical alignment to ge them to line up properly.

In the case below, I used vertical-align: sub

button{
  background-color: #004d94;
  border: none;
  border-radius: 10px;
  padding: 10px 60px;
  color: #fff;
  font-family: "Montserrat";
  font-size: 20px;
  line-height: 40px;
}

button i {
  padding-right: 20px;
  font-size: 24px;
}

button > span{
  font-family: "Lobster Two";
  font-size: 48px;
  line-height: 40px;
  vertical-align: sub;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster Two:ital@1&family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">


<button>
  <i ></i>
  Join the <span>crew</span> today
</button>