Change text size + bold

JDGS

Hi,

How can I change the size of the text to 28 (smugmug only allows 24 or 32) and how can I make the text "more bold" (I have already the text in bold, but I want a bit more)? Can it be done with CSS?
The text I want to customize is the title of this page: https://danielsantosphoto.com/Workshops/English/Learn-Photography-While-Visiting-Porto/n-GxxXMq

Thank you so much in advance!
Daniel Santos

Hikin' Mike

Looks like you're using 'Montserrat' so they offer several bold variations: Medium (500), Semi-bold (600), Bold (700), Extra-bold (800), and Black (900). Going to assume you want it really bold, so I picked Black. Add this to your Theme's CSS Custom section. Putting it any other place will NOT work.

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Montserrat Black'), local('Montserrat-Black'), url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_epG3gnD_g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.sm-user-ui .sm-page-widget-28829064 h2 span {
  font-size: 28px !important;
  font-weight: 900 !important;
}

JDGS

Thank you for the help.
But that changed all the words that were in bold, even the main menu. Is it possible to change only the "Learn Photography While Visiting Porto" title? (It would be good if smugmug allowed more of this small and simple customizations with the text editor)

Hikin' Mike

@JDGS said:
Thank you for the help.
But that changed all the words that were in bold, even the main menu. Is it possible to change only the "Learn Photography While Visiting Porto" title? (It would be good if smugmug allowed more of this small and simple customizations with the text editor)

Didn't see that you also had 'bold' elsewhere. Just need to add bold (700) as well. That's also why I don't use the Text Block. I prefer using a HTML/CSS Block because it is more custom-friendly. The Text Block SHOULD provide every possibly variance on a particular font though.

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Montserrat Black'), local('Montserrat-Black'), url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_epG3gnD_g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.sm-user-ui .sm-page-widget-28829064 h2 span {
  font-size: 28px !important;
  font-weight: 900 !important;
}

JDGS

It still changes everything in bold, including the menu. Could I be doing something wrong?

Imagine I want to edit other text boxes on the page using css, how can I target them, so the changes are only visible on that text box?

Hikin' Mike

@JDGS said:
It still changes everything in bold, including the menu. Could I be doing something wrong?

It is because you have this in your CSS

.sm-page-widget-nav a {
    font-weight: 900!important;
}

It never worked until you added the extra fonts, 700 & 900.

Imagine I want to edit other text boxes on the page using css, how can I target them, so the changes are only visible on that text box?

You will need to find each widget number and it it to your CSS. I have a tutorial on how to locate your widget number in my signature.

JDGS

Ok, thank you so much for your help