Jump to content

Problem with font for image captions

Recommended Posts

Site URL: https://www.kristinkuehn.com/writing/virgo-ingress-2024

Hi!

I noticed that quotation marks aren't displayed the same as in the text. I've uploaded fonts manually. Do I need to add code to apply the fonts to image captions?

See image caption for second image on this page:
https://www.kristinkuehn.com/writing/virgo-ingress-2024
Compare quotation marks in caption with quotation marks two paragraphs down.

This is all the code I'm already using for my fonts:

// My own regular font
@font-face {
font-family: CrimsonTextRegular;
src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/6509d0807e6fd40c6b635a1d/1695142016438/CrimsonText-Regular.ttf);
}

// ALL text everywhere
html * {font-family: 'CrimsonTextRegular' !important;
}

// My own italic font
@font-face {
  font-family: CrimsonTextItalic;
  src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/65424524ad047a58af5ddb75/1698841893061/CrimsonText-Italic.ttf);
}

// Italic text everywhere
html * em {
  font-family: 'CrimsonTextItalic' !important;
  font-style: normal !important;
}

// Italic text in navigation
.header-nav-item a {
  font-family: 'CrimsonTextItalic' !important;
  font-style: normal !important;
}

// My own bold font semi-bold 600
@font-face {
  font-family: CrimsonTextSemiBold;
  src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/6549f8b37dff30592cef97cd/1699346611417/CrimsonText-SemiBold.ttf);
}

// Bold text everywhere
html * b, strong {
  font-family: 'CrimsonTextSemiBold' !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

// My own bold italic font semi-bold 600
@font-face {
  font-family: CrimsonTextSemiBoldItalic;
  src: url(https://static1.squarespace.com/static/64bbec1009a61f1b8dfb39e9/t/654deaae3fb4394cc9158bbc/1699605166469/CrimsonText-SemiBoldItalic.ttf);
}

// Bold italic text everywhere
html * b em, strong em {
  font-family: 'CrimsonTextSemiBoldItalic' !important; // bold and italics font file name here
  font-style: normal !important;
}

// Change bold font weight
b, strong {
  font-weight: 600 !important;
}

Many thanks!

Link to comment
  • Replies 0
  • Views 482
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.