Help with custom fonts in 7.1 templates

Site URL: https://katenagel.com

Hi, I am trying to create a custom font styles for P3 and P4 options and need help with the CSS code. The font settings would apply globally to the site - I would like additional options for formatting my content. 

The other CSS formatting issue I'm having is with when I create a hyper link in the web content (e.g., a link to a blog post) By default it underlines the text associated with the link, and it's distracting to the reader. I wanted to be able to have appear as a different color as a way to highlight the link. 

Appreciate any help with these two issues!  Thanks! 😊

Add to Design > Custom CSS

@font-face {
	font-family: fontname;
	src: url(enter custom font file url here);
}
/* p3 */
p.sqsrte-small {
	font-family: fontname !important;
}
/* p4 */
pre code {
	font-family: fontname !important;
}

Q2. You mean change link color?

Thank you so much!  I'll try this now!

Regarding my second question - currently in the template, a hyper link shows up as underlined in the content and I find that it distracting.  I wanted to format it so that it would appear as a color different from the standard text, ideally.  Or another option would be to have the link formatted in a bold or italic.  Same font as the paragraph font, only a different format for the part of the content that is the hyperlink.  

Hope this helps and thanks again for your help!  K

23 hours ago, cupkate said:

Thank you so much!  I'll try this now!

 

Regarding my second question - currently in the template, a hyper link shows up as underlined in the content and I find that it distracting.  I wanted to format it so that it would appear as a color different from the standard text, ideally.  Or another option would be to have the link formatted in a bold or italic.  Same font as the paragraph font, only a different format for the part of the content that is the hyperlink.  

Hope this helps and thanks again for your help!  K

 

Add to Design > Custom CSS

a {
    text-decoration: none !important;
    color: blue !important;
}

On 5/9/2021 at 10:37 AM, tuanphan said:

Add to Design > Custom CSS

a {
    text-decoration: none !important;
    color: blue !important;
}

 

Thank you so much for this help - it worked!! 

On 5/19/2021 at 12:52 AM, cupkate said:

Thank you so much for this help - it worked!! 

Logo looks big. 

(Mobile-Footer) Reduce logo size?

On 5/21/2021 at 11:51 AM, tuanphan said:

Logo looks big. 

(Mobile-Footer) Reduce logo size?

Yes - is there a way I can do this in the mobil version?

14 hours ago, cupkate said:

Yes - is there a way I can do this in the mobil version?

 

Add to Design > Custom CSS

/* Mobile-Reduce footer logo */
@media screen and (max-width:767px) {
footer.sections .image-block {
    width: 30%;
}
}