Jump to content

How to cancel font color, imported font is already colored!

Recommended Posts

Site URL: https://www.polyphonyproductions.com/

HELP! I made a font in illustrator that is blue w/ a black outline but when I imported it into squarespace it auto makes it black or white, any color over the color I already made, any way around this? It also only happens on chrome and mobile, firefox recognizes the color that I made in illustrator but if I could make the font color clear in squarespace or basically override it somehow that would be great! TSYM! First time making a site so im sorta lost 😞 

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

  • KristinH_SQSP changed the title to How to cancel font color, imported font is already colored!
5 hours ago, sool said:

Sorry not sure what you mean! I created a custom font in illustrator and then put it in with CSS

Can you send the code you used to add custom font?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@font-face {

font-family: 'ASTRAL 1';

src: url(https://static1.squarespace.com/static/628691b29aeed61bdba801bf/t/62f691b68bdcca7820eb9fbd/1660326326956/Astral+Delight.ttf);

}


@font-face {

font-family: 'ASTRAL 2';
 font-weight: 600;  


src: url(https://static1.squarespace.com/static/628691b29aeed61bdba801bf/t/6302a2421b03ea72e59f9398/1661116995086/ASTRLFINALLITEBLU.otf);

}

h1 {

font-family: 'ASTRAL 2';}


h2 {

font-family: 'ASTRAL 2';}


h3 {
    font-family: 'ASTRAL 2' !important;
}


h4 {

font-family: 'ASTRAL 2';}


.sqsrte-large {

font-family: 'ASTRAL 2';}

p {

font-weight: 400 !important;
  
font-family: 'ASTRAL 2';}


.sqsrte-small {

font-family: 'ASTRAL 2';}


.sqsrte-large {font-family: ‘ASTRAL 2‘;}

.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family: 'ASTRAL 2' !important;
}

.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: 'ASTRAL 2' !important;
}

.header-nav-item a {
  font-family: 'ASTRAL 2' !important;
}

.form-wrapper .field-list .title {

font-family: 'ASTRAL 2';}

.form-wrapper .field-list .field .caption {

font-family: 'ASTRAL 2';}

.form-wrapper .field-list .field .caption {

}

.sqs-widgets-audio-player {background:#000000!important}

.sqs-widgets-audio-player .title-wrapper .title{font-family: 'ASTRAL 2';
  
}

.sqs-widgets-audio-player .action .play-button {border-left-color: #89cff0!important} .sqs-widgets-audio-player .action .pause{border-color: #89cff0!important}

[data-collection-type*="portfolio"] {
h2.item-pagination-title {
    display: none;
}
.item-pagination-prev-next {
    display: block !important;
}}

.grid-image:before {font-family: 'ASTRAL 2';
  
}

/* Pagination text */
.item-pagination-prev-next {
    font-family: 'ASTRAL 2' !important;
}

@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="629502c8b858fa0b12f9e06f"] div#gridThumbs {
    min-height: unset !important; 
}}

Link to comment

No the font is supposed to be blue with a black outline, but squarespace colors it to make it all black. I designed the font in adobe illustrator to be blue with a black outline and the file I uploaded to squarespace is blue with black outline, but the color theme in squarespace colors it again to be plain black, so I need some code to tell squarespace to not re-color the font since it is ALREADY colored in the actual font file. If you go on firefox and look at the site that is how it is SUPPOSED to look like but on google chrome it looks like that, all black. Am I making sense? sorry for the confusion and thank you for your repeated help! 

Link to comment

Create an account or sign in to comment

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


×
×
  • 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.