CSS font not working on video pages

Hi! I added a CSS code to my site in order to change to custom fonts, but the Video Pages doesn't seem to respond to it. They show the custom font in the description, but the titles and menus are not affected. Do you happen to know a code I can add to correct this?

Hi, please share a link to your website so can check easier, and also the custom code you used for changing the font. Thanks

Hi @melody495 My site is: https://vulpi.squarespace.com/guia-para-pacientes

And the css code i used after uploading the fonts is:

h1 {font-family: 'MikadoBlack';}
h2 {font-family: 'MikadoBlack';}
h3 {font-family: 'MikadoBold';}
h4 {font-family: 'MikadoBold';}
P {font-family: 'MikadoRegular';}



.header-title-text a {
  font-family: 'MikadoBold' !important;}
.header-nav-item a {
  font-family: 'MikadoMedium' !important;}
.header-actions-action .btn {
  font-family: 'MikadoBold' !important;}
.sqs-announcement-bar-url a {
  font-family: 'MikadoRegular' !important;}



.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family: 'MikadoBold' !important;}
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: 'MikadoBold' !important;}
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: 'MikadoBold' !important;}

It didn't apply to all type of pages and sections, so I had to add more codes for those types of content like this example:

.blog-basic-grid .blog-title {
  font-family: 'MikadoMedium' !important;}
.header-nav-item a {
    font-family: 'MikadoMedium';}
.blog-item-wrapper .blog-item-title h1.entry-title {
  font-family: 'MikadoBold';}
.item-pagination-link .item-pagination-title {
    font-family: 'MikadoMedium' !important;}

So I'm looking for the code for video pages.

Thanks!

Hi, can you share the code you use to upload the custom font files? It seems like you have only uploaded 'MikadoBold' and 'MikadoRegular'. Check you've uploaded the other font family you need and let me know how it goes. Click save and refresh page to check. If not working, please share the upload code.

Also, there is an error here. What are you trying to do with the last line?

h1 {font-family: 'MikadoBlack';}
h2 {font-family: 'MikadoBlack';}
h3 {font-family: 'MikadoBold';}
h4 {font-family: 'MikadoBold';}
P {font-family: 'MikadoRegular';}

The paragraphs selectors are as per below. Also note, that you've used an Uppercase "p", it should be a Lowercase "p".

// p1
.sqsrte-large {
	font-family: xxx;
}
// p2 
p {
	font-family: xxx;
}
// p3 
.sqsrte-small {
	font-family: xxx;
}

Hi @melody495 Thanks for your help! Below I share the complete code I've added. As for the uppercase P, I'll change it, but paragraphs are working fine in all type of pages, what I'm having trouble actually are for headings.

I've inserted a command for porfolios, summaries and other type of pages and I'm looking for the command to override the font in the videos and store page. If you can help me I'd appreciate it!

@font-face {

    font-family: 'MikadoBlack';

       src: url('https://static1.squarespace.com/static/648a80e5fe34362e605e5704/t/648a8f2ad2153f2da1c4276f/1686802219259/Mikado-Web-Black.woff');
}
@font-face {

    font-family: 'MikadoBold';

       src: url('https://static1.squarespace.com/static/648a80e5fe34362e605e5704/t/648a8f3c2bf10967cc975254/1686802237389/Mikado-Web-Bold.woff');
}
@font-face {

    font-family: 'MikadoMedium';

       src: url('https://static1.squarespace.com/static/648a80e5fe34362e605e5704/t/648a8f5765ee8a5901a0e162/1686802263237/Mikado-Web-Medium.woff');
}
@font-face {

    font-family: 'MikadoRegular';

       src: url('https://static1.squarespace.com/static/648a80e5fe34362e605e5704/t/648a8ef0a47b8f431c6d582a/1686802161016/Mikado-Web-Regular.woff');
}
@font-face {

    font-family: 'MikadoBoldItalic';

       src: url('https://static1.squarespace.com/static/648a80e5fe34362e605e5704/t/648a8f35f5b52f413973cae7/1686802230080/Mikado-Web-Bold-Italic.woff');
}
@font-face {

    font-family: 'MikadoRegularItalic';

       src: url('https://static1.squarespace.com/static/648a80e5fe34362e605e5704/t/648a8f65c40e215f478ce260/1686802277142/Mikado-Web-Regular-Italic.woff');
}



h1 {font-family: 'MikadoBlack';}
h2 {font-family: 'MikadoBlack';}
h3 {font-family: 'MikadoBold';}
h4 {font-family: 'MikadoBold';}
P {font-family: 'MikadoRegular';}



.header-title-text a {
  font-family: 'MikadoBold' !important;}
.header-nav-item a {
  font-family: 'MikadoMedium' !important;}
.header-actions-action .btn {
  font-family: 'MikadoBold' !important;}
.sqs-announcement-bar-url a {
  font-family: 'MikadoRegular' !important;}



.sqs-block-button-element--small,  .sqs-button-element--tertiary {
  font-family: 'MikadoBold' !important;}
.sqs-block-button-element--medium, .sqs-button-element--primary {
  font-family: 'MikadoBold' !important;}
.sqs-block-button-element--large, .sqs-button-element--secondary {
  font-family: 'MikadoBold' !important;}



.newsletter-form-header-title {
  font-family: 'MikadoBold' !important;}
.newsletter-form-header-description p {
  font-family: 'MikadoRegular' !important;}
.newsletter-form-field-element {
  font-family: 'MikadoRegular' !important;}
.newsletter-form-button {
  font-family: 'MikadoBold' !important;}
.newsletter-form-footnote {
  font-family: 'MikadoRegular' !important;}



.sqs-block-quote blockquote {
  font-family: 'MikadoBoldItalic' !important;}
.sqs-block-quote .source {
  font-family: 'MikadoRegularItalic' !important;}



.blog-basic-grid .blog-title {
  font-family: 'MikadoMedium' !important;}
.header-nav-item a {
    font-family: 'MikadoMedium';}
.blog-item-wrapper .blog-item-title h1.entry-title {
  font-family: 'MikadoBold';}
.item-pagination-link .item-pagination-title {
    font-family: 'MikadoMedium' !important;}

.sqs-block-summary-v2 {

    .summary-title .summary-title-link,
    .summary-heading .summary-collection-title {
        font-family: 'MikadoMedium' !important;
        font-weight: 300 !important;
        font-size: 26px !important;
        color: #ccccc !important;
        text-transform: none !important;
        font-style: none !important;
    }
}

.portfolio-title {
  font-family: 'MikadoBlack' !important;
}

19 hours ago, Dieg said:

As for the uppercase P, I'll change it, but paragraphs are working fine in all type of pages, what I'm having trouble actually are for headings.

Hi, you don't have to change the P, but that block of code is not having any effect as is. By changing it it will start working correctly, but you have to double check that any changes from this is as you intend.

19 hours ago, Dieg said:

I've inserted a command for porfolios, summaries and other type of pages and I'm looking for the command to override the font in the videos and store page. If you can help me I'd appreciate it!

That page is a lesson page, so what you have done doesn't include any CSS for that type of page. Try the below

// change style for lesson title
.lessons .lesson-title {
	font-family: xxx; // put what font family you want here
}

// change style for lesson category
.lessons .video-category-nav-link {
	font-family: xxx; // put what font family you want here
}

Let me know how it goes.

Thanks @melody495! That worked on the main lesson page. Would you happen to know the code for the item page?

This is the URL: https://vulpi.squarespace.com/guia-para-pacientes/v/qu-es-el-cncer-y-cmo-se-cura

10 hours ago, Dieg said:

Thanks @melody495! That worked on the main lesson page. Would you happen to know the code for the item page?

This is the URL: https://vulpi.squarespace.com/guia-para-pacientes/v/qu-es-el-cncer-y-cmo-se-cura

Hi, which text on this page do you want to change? If you can screenshot and circle, I can check easier.