Jump to content

Fonts listed in CSS are not appearing

Recommended Posts

Why are the fonts specified in the CSS code below not appearing on screen?

I'm trying implement my code on an unlinked page in the Brine template.

I've inserted the CSS code via Design-->Custom Code. Only Freight Text is appearing, not the other fonts.

Project HTML


<div class="tt-canvas-inner-21813">
   <span class="tt-layer tt-21813-layer-1">LEGALITIES</span>
   <span class="tt-layer tt-21813-layer-2">This page was last updated in </span>
   <span class="tt-layer tt-21813-layer-3">JULY</span>
   <span class="tt-layer tt-21813-layer-4">2019</span>
</div>



Project CSS

div.tt-canvas-21813 { padding: 2em 0; margin: 0 auto; background-color: #fff;}

div.tt-canvas-inner-21813 { position: relative; margin: 0 auto; width: 811px; height: 192px;}

span.tt-layer { position: absolute; display: inline-block; white-space: normal; line-height: 1em; transform-origin: 50% 50%;}

span.tt-21813-layer-1 { border-color: #fff; border-radius: 0em; border-width: 0em; color: #242424; font-family: freight-neo-pro; font-size: 3.6em; font-weight: 600; padding: 0em; white-space: nowrap; overflow: visible; top: 19px; left: 0; width: 282px; height: 57px; z-index: 1000;}

span.tt-21813-layer-2 { border-color: #fff; border-radius: 0em; border-width: 0em; color: #@$@$@$; font-family: freight-text-pro; font-size: 1.8em; padding: 0em; white-space: nowrap; overflow: visible; top: 106px; left: 3px; width: 351px; height: 28px; z-index: 1000;}

span.tt-21813-layer-3 { border-color: #fff; border-radius: 0em; border-width: 0em; color: #c1c1c1; font-family: freight-text-pro; font-size: 3em; font-weight: 500; letter-spacing: 0.05em; padding: 0em; white-space: nowrap; overflow: visible; top: 94px; left: 348px; width: 118px; height: 48px; z-index: 1000; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);}

span.tt-21813-layer-4 { border-color: #fff; border-radius: 0em; border-width: 0em; color: #c1c1c1; font-family: freight-text-pro; font-size: 12em; font-weight: 500; letter-spacing: -0.025em; padding: 0em; white-space: nowrap; overflow: visible; top: 0; left: 462px; width: 349px; height: 192px; z-index: 1000; -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg);}

Link to comment
  • Replies 1
  • Views 706
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.