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

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 😞 

Hi,

Which elements do you use font?

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

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?

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

Thank you. The font looks fine to me?

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!