OK so I already changed the header fonts. They were Archivo Black but once I added the code below in the customizer The header text on the home/blog page worked fine but on the single post page & WooCommerce product titles changed to what I believe to be Archivo regular (they were very skinny) and when I went into “typography” in the customizer and changed the header fonts to anything else they would change to that font but if I changed back to Archivo Black they wouldn’t work. They would stay skinny. I then added the “@fontface” code after installing the Archivo Black font in the theme directory but the fonts still would not display at all. Then I just changed them to the current fonts.
Here is the code I used:
.posts-archive .entry-title a {
text-transform: uppercase;
background-image: linear-gradient(
-225deg,
#231557 0%,
#44107a 29%,
#ff1361 67%,
#fff800 100%
);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: #fff;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 2s linear infinite;
display: inline-block;
font-size: 30px;
}
@keyframes textclip {
to {
background-position: 200% center;
}
}
The only edits to the above code were hex colors so I know that wasn’t the issue. Once the fonts didn’t work, like I said I installed the font to the directory, then tried this code, which worked for the home page titles but still made all other heading fonts skinny. They displayed correctly in the customizer for desktop, tablet and mobile sizes but when I looked on an actual mobile device they were not showing correctly. I tried both an Android and an iPhone. Below is the modified CSS I thought would bring the fonts back but I had no luck.
@font-face {
font-family: 'Archivo Black';
src: url('https://website.com/wp-content/themes/botiga/fonts/ArchivoBlack-Regular.ttf') format('truetype');
font-weight: normal;
}
@keyframes textclip {
to {
background-position: 200% center;
}
}
.posts-archive .entry-title a,
.single .entry-header .entry-title {
text-transform: uppercase;
background-image: linear-gradient(
-225deg,
#dbdcd7 0%, #dddcd7 24%, #e2c9cc 30%, #e7627d 46%, #b8235a 59%, #801357 71%, #3d1635 84%, #1c1a27
);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: #fff;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 4s linear infinite; /* Adjust the animation duration here */
display: inline-block;
font-size: 30px;
font-family: 'Archivo Black', sans-serif;
}
/* Media Query for Mobile Devices */
@media (max-width: 767px) {
.posts-archive .entry-title a,
.single .entry-header .entry-title {
font-size: 24px;
}
}
Hope you can figure it out.
