We are able to use our main Glossy Fonts in Unbounce LP now. To use Glossy Fonts please copy and paste the Class Name to Custom HTML or Text Section on your Unbounce Landing Page
Base text Glossy Font
(news-gothic-std, "News Gothic Std", "Open Sans", "JAF Bernino Sans Narrow", "Helvetica Neue", sans-serif)
.base-xl-text font size 24px, color #e64361
.base-l-text font size 18px, color #e64361
.base-m-text font size 13px, color #222222
.base-s-text font size 1em, color #555555
Example:
<div class="base-box">
<h1 class="base-xl-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</h1>
<h2 class="base-l-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</h2>
<p class="base-m-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</p>
<p class="base-s-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</p>
</div>
Light text Glossy Font
(kepler-std, "Kepler Std", Utopia, "Bodoni MT", "Book Antiqua", Georgia, serif)
.light-xl-text font size 24px, color #e64361
.light-l-text font size 18px, color #e64361
.light-m-text font size 13px, color #222222
.light-s-text font size 1em, color #555555
<div class="light-box">
<h1 class="light-xl-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</h1>
<h2 class="light-l-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</h2>
<p class="light-m-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</p>
<p class="light-s-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</p>
</div>
Standard text Glossy Font
(news-gothic-std, "News Gothic Std", "Open Sans", "JAF Bernino Sans Narrow", "Helvetica Neue", sans-serif)
.standard-xl-text font size 24px, color #e64361
.standard-l-text font size 18px, color #e64361
.standard-m-text font size 13px, color #222222
.standard-s-text font size 1em, color #555555
<div class="standard-box">
<h1 class="standard-xl-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</h1>
<h2 class="standard-l-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</h2>
<p class="standard-m-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</p>
<p class="standard-s-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</p>
</div>
Helvetica text Glossy Font
(news-gothic-std, 'Helvetica Neue', Helvetica, Arial, sans-serif)
.helvetica-xl-text font size 24px, color #e64361
.helvetica-l-text font size 18px, color #e64361
.helvetica-m-text font size 13px, color #222222
.helvetica-s-text font size 1em, color #555555
<div class="helvetica-box">
<h1 class="helvetica-xl-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</h1>
<h2 class="helvetica-l-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</h2>
<p class="helvetica-m-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</p>
<p class="helvetica-s-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</p>
</div>
Fouc-Safe text Glossy Font
(Georgia, serif)
.foucsafe-xl-text font size 24px, color #e64361
.foucsafe-l-text font size 18px, color #e64361
.foucsafe-m-text font size 13px, color #222222
.foucsafe-s-text font size 1em, color #555555
<div class="foucsafe-box">
<h1 class="foucsafe-xl-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</h1>
<h2 class="foucsafe-l-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</h2>
<p class="foucsafe-m-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</p>
<p class="foucsafe-s-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</p>
</div>
EyeCatcher text Glossy Font
(eyecatcher, Helvetica, Arial, sans-serif)
.eyecatcher-xl-text font size 5em, color #e64361
.eyecatcher-l-text font size 4em, color #e64361
.eyecatcher-m-text font size 3em, color #222222
.eyecatcher-s-text font size 2.5em, color #555555
<div>
<h1 class="eyecatcher-xl-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</h1>
<h2 class="eyecatcher-l-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</h2>
<p class="eyecatcher-m-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</p>
<p class="eyecatcher-s-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla risus
</p>
</div>
We can also use the fonts to customize HTML blocks/boxes but the font size will always be 13px
.base-box
.light-box
.standard-box
.helvetica-box
.foucsafe-box
To customize the text, you should add a “Text” section on your Unbounce LP and click “Source” (e.g. screenshot)
