Add Custom Text On A Button
Ola
Hi!
I use custom fonts on some of our pages. It works fine with headings. I can see the font "Spurs" applied there.
I want the same custom font on the buttons text on these pages.
I tried to add this code but doesn't work.
How can I apply the font Spurs to the button? + How can I set the size of the button (Large)
I have selected "Custom" as button type in the add-on settings.
Since it we use this font on only some pages, the code should not be in a custom.css that applies to all pages.
Kind regards Ola
*@font-face { font-family: 'Spurs'; src: url(https://www.coachenevents.se/templates/shaperhelixultimate/fonts/Spurs.eot); src: url(https://www.coachenevents.se/templates/shaperhelixultimate/fonts/Spurs.eot?#iefix) format('embedded-opentype'), url(https://www.coachenevents.se/templates/shaperhelixultimate/fonts/Spurs.otf) format('otf'), url(https://www.coachenevents.se/templates/shaperhelixultimate/fonts/Spurs.ttf) format('truetype'), url(https://www.coachenevents.se/templates/shaperhelixultimate/fonts/Spurs.woff) format('woff'), url(https://www.coachenevents.se/templates/shaperhelixultimate/fonts/Spurs.woff2) format('woff2'), url(https://www.coachenevents.se/templates/shaperhelixultimate/fonts/Spurs.svg#Spurs) format('svg'); }
.custom-button {
font-family: 'Spurs';
background-color: #blue;Â Â Â
color: white; Â Â Â
padding: 15px 32px;
font-size: 16px;
 margin: 4px 2px; / Margin /
}
Paul Frankowski
Accepted AnswerIf you want to use that same designed button in many subpages, just create one button, with Custom Style and Save addon and reuse it.
Atick Eashrak Shuvo
Accepted AnswerHello Ola,
Apolozy for the inconvenience caused. Please follow this documentation for guidance on how to use and apply custom fonts in SP Page Builder: 👉 How to install custom fonts in SP Page Builder
Paul Frankowski
Accepted AnswerHi, some extra tips:
Page Builder buttons class is
.sppb-btn { } you can use it also as: a.sppb-btn { }
and let's say that you need to use your own design then in Button addon settings select "Button style: Custom" - choose colors, paddings, margins etc.
and your button class will be
.sppb-btn.sppb-btn-custom { }
Paul Frankowski
Accepted Answerand if you want to use your own class name and font then in Addon settings > Style (tab) > CSS Class : custom-button
Then you should use sort of....
.sppb-btn.custom-button { font-family: 'Spurs'; }
yes, you can also redefine colors, but !important may be needed.
Of course I cannot teach your CSS here, so I shared only basic tips.