Adding multiple fonts to a button

Hi, I'm struggling to find a way to add multiple font sizes to the button in the header section. Could anyone help with that?

Hi. Can you share link to your site? We can check easier

On 7/10/2021 at 3:59 PM, tuanphan said:

Hi. Can you share link to your site? We can check easier

Unfortunately I cannot share the site

If your site is trial, private, you can setup password & share url

Hi I am having the same difficulty. I want to use two different fonts on one line for my header button.

Site: www..elizabethlovestoorganize.com

Thank you!!

This is a multi-part solution.

The first issue is that you can't address the default text of the button with CSS. To be able to address each word with CSS they need to be wrapped with a tag. In this case a span tag.

Please see the following.

Header CTA Buttons Each Word Span Tag Add

The second issue is creating some CSS to address the now spanned words.

First remove the following existing CSS, make a copy somewhere.

.header-actions-action a,.header-menu-cta a {
  font-family: "Karla" !important;
}

Add the following example CSS. Of course you will want to change the declarations to meet your need.

/* desktop */

#siteWrapper .header-actions-action--cta .btn span:nth-child( 1 ),

/* mobile */

#siteWrapper .header-menu-cta .btn span:nth-child( 1 )

{

  font-family : serif;
      
 }

This example code is specific to the poster's need.

Let me know how it goes.

I did what you said as best I could but I do not see a difference for this. Can you let me know if you can see what I'm missing? Thank you so much, I appreciate your help!

2 hours ago, Belizabeth said:

I did what you said as best I could but I do not see a difference for this.

The font family for the button is already Karla. If you want it to look different you have to do something like bold it, change its weight or size, or change the font family. Try my example first so you can see that it works. You then need to make the CSS declarations for whatever effect you are trying to achieve.