Font Style Adjustment

• 

  kmp5268 · Member · Dec 21, 2016 at 7:31 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I am looking to globally change the “base font” style on my site.

  Customize -> Font -> Base Font (Source Sans Pro)

  This is how I want it. However, it doesn’t allow me to change the style (i.e., light, bold, italic, etc.) like it does with “headings”. I would like to have both “headings” and “base font” to be Source Sans Pro (light).

  Any help is greatly appreciated.

  The blog I need help with is: (visible only to logged in users)

• 

  trulyboring · Member · Dec 21, 2016 at 7:34 pm

  • Copy link

  Sweet-looking site you have there.

• 

  thesacredpath · Member · Dec 22, 2016 at 9:41 pm

  • Copy link

  Hi there, for readability and accessibility for the visually challenged, the base font at Customize > Fonts does not offer font weights as an option. If the font is too light in stroke thickness, some may have problems reading it. That said, add the following to your custom CSS to set the base font to the lightest possible stroke.

  .wf-active body {
  	font-weight: 100;
  }

• 

  kmp5268 · Member · Dec 22, 2016 at 10:51 pm

  • Copy link

  Hi @thesacredpath,

  Thank you. That is exactly what I was looking for. Once I applied this code, I realized that I need one to make the text light in the call-to-action buttons as well as in the contact form. Once those are thin, that will be it.

  Also, can you tell me if the text in the call-to-action buttons and the contact form are Source Sans Pro like the rest of the site? If so, that’s good. If not, could you make that text Source Sans Pro?

  Again, thank you for your assistance.

• 

  thesacredpath · Member · Dec 22, 2016 at 11:09 pm

  • Copy link

  For the weight on buttons and such, add the following.

  button, .archive .read-more a, .blog .read-more a, .search-results .read-more a, .button, input[type="button"], input[type="reset"], input[type="submit"] {
  	font-weight: 100;
  }

  I checked the font family on the buttons, and yes, it is source sans pro like the rest.

• 

  kmp5268 · Member · Dec 23, 2016 at 3:34 am

  • Copy link

  Hi @thesacredpath,

  Thank you again for the support. That code worked good. And also thank you for checking on the font family for the buttons.

  The only thing that doesn’t seem to be “light” is the title for each field within my contact form. The actual text within each field is light, but the actual title above each field still needs to be “light.”

  Again, your support is greatly appreciated.

• 

  thesacredpath · Member · Dec 23, 2016 at 6:33 pm

  • Copy link

  For the contact form labels, add the following to get rid of the bold. They are the same font as everything else (source sans pro).

  .contact-form label {
  	font-weight: 100 !important;
  }