Site title font won't change

• 

  waxbuckets · Member · Jan 28, 2014 at 6:53 am

  • Copy link
  • Add topic to favorites

  I am using this code:

  .site-title {
  color: #FFFFFF;
  font-family: Lato,sans-serif;
  font-size: 8rem;
  font-weight: 300;
  letter-spacing: 5px;
  line-height: 1;
  margin: 0;
  padding: 4rem 0 0.5rem;
  text-transform: uppercase;
  }

  Changing the numbers or font style don’t seem to do anything (padding and letter spacing DO change though). I’d like to change the title font type and size independent of the headings on the rest of the site, but the font menu in customization seems to change them all together. Plus, the site title wraps on the mobile version. Is there any way to avoid that?

  waxbuckets.wordpress.com

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

• 

  waxbuckets · Member · Jan 28, 2014 at 7:03 am

  • Copy link

  I am using this code:

  .site-title {
  color: #FFFFFF;
  font-family: Lato,sans-serif;
  font-size: 8rem;
  font-weight: 300;
  letter-spacing: 5px;
  line-height: 1;
  margin: 0;
  padding: 4rem 0 0.5rem;
  text-transform: uppercase;
  }

  Changing the numbers or font style don’t seem to do anything (padding and letter spacing DO change though). I’d like to change the title font type and size independent of the headings on the rest of the site, but the font menu in customization seems to change them all together. Plus, the site title wraps on the mobile version. Is there any way to avoid that?

  waxbuckets.wordpress.com

  The blog I need help with is waxbuckets.wordpress.com.

• 

  justpi · Member · Jan 28, 2014 at 9:04 am

  • Copy link

  When you have selected a Typekit font in Appearance > Fonts, it overrides some of the values for .site-title. You need to use this selector instead:
  .wf-active .site-title
  or add the !important tag to the values that don’t work, for example:
  font-size: 8rem !important;

• 

  waxbuckets · Member · Jan 30, 2014 at 2:48 am

  • Copy link

  I got it all to work and then changed my theme to Twenty Ten and lost all the effects of this code that worked in Suits. Sorry if this has turned into a theme question, but I’m guessing it’s a CSS problem.

  .site-title {
  color: #FFFFFF;
  font-family: lilyupc !important;
  font-size: 12rem !important;
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 1;
  margin: 0;
  padding: 4rem 0 .5rem;
  text-transform: none;
  }

  Used different font values for other site elements, but they have all reverted to default within this theme

• 

  justpi · Member · Jan 30, 2014 at 10:17 pm

  • Copy link

  All your custom CSS is removed when you switch theme, because most CSS is theme specific: each theme has a different design and uses different selectors, so code that works on one theme might have no effect or produce erratic results when used on a different theme.

  On Twenty Ten the selector for the blog title isn’t .site-title, it’s #site-title.
  Also, the title is a link, so changing the color requires the selector for the title link rather than the title:
  #site-title a
  Same goes for the font weight.