Jump to content

CSS font not working on video pages

Recommended Posts

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?image.thumb.png.d11f17e2717db50f31c73985729045d1.png

 

image.thumb.png.b3944d812e259c1b0e9f44a4f58ebfcb.png

Link to comment

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

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment

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!

 

Link to comment

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

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment

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

 

Link to comment
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.

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment
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.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

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.