Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Fonts listed in CSS are not appearing


squarelust

Question

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);}

Edited by squarelust
Initial Revision
Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...