Section Title Custom Font Styling

scatalogics / 2012-12-01 05:42:42   

Hi there,

I've been trying to get mu section titles to match the custom font I have for the sub-sections, but I don't seem able to do so. I have the section titles unpublished so they won't be links, but I get the default font treatment and I can't adjust it in the style.css. Ideally I would like the Section Titles to be a bolder version of the links below, in the custom font.

This is my website: scatalogics.com

scatalogics / 2012-12-01 05:43:09   

Sorry, I meant to say scatalogics.com/…

arsondpi / 2012-12-01 09:24:12   

Find line 54 in your style.css and add a font-family attribute:

  1. #index ul.section span.section_title {
  2.     font-family: "RobotoLight";
  3. }
scatalogics / 2012-12-01 20:46:41   

Thanks for getting back to me quickly, that seemed to help. However I would prefer it be a bolder font face. When I tried to switch it to "RobotoMedium" or "RobotoBold" (both of which are in my Style.css) it shows up as Times New Roman. Any idea why that might be?

arsondpi / 2012-12-02 06:50:15   

ok - now I understand what's going on... apparently your @font-face code is at the very bottom of the style.css file. Set it on the very top before any css rule...
Also you need to specify the custom font to all css rules that have a font-family attribute and override the specified fonrt (which means deleting it, overriding it or resetting it)

scatalogics / 2012-12-03 23:12:53   

Hi, I tried your recommendation, but it didn't work. There seems to be something overwriting whatever styling updates I'm making to the Section Titles. All I've been able to do is make everything the same Font weight, but nothing displays the RobotoBold font.

My site was an upgrade from version 07, could that be why I'm having issues? A friend suggested re-creating the entire thing from scratch because there might be some sub-section structure issues.

arsondpi / 2012-12-03 23:59:40   

ok I get 3 errors when checking your page when viewing your page.

You made a url error:

  1. @font-face {
  2.     font-family: 'RobotoMedium';
  3.     src: url('scatalogics.com/portfolio/ndxzsite/…');
  4.     src: url('scatalogics.com/portfolio/ndxzsite/…') format('embedded-opentype'),
  5.          url('scatalogics.com/portfolio/ndxzsite/…') format('woff'),
  6.          url('scatalogics.com/portfolio/ndxzsite/…') format('truetype'),
  7.          url('scatalogics.com/portfolio/ndxzsite/…') format('svg');
  8.     font-weight: normal;
  9.     font-style: normal;
  10. }
  11. @font-face {
  12.     font-family: 'RobotoBold';
  13.     src: url('scatalogics.com/portfolio/ndxzsite/…');
  14.     src: url('scatalogics.com/portfolio/ndxzsite/…') format('embedded-opentype'),
  15.          url('scatalogics.com/portfolio/ndxzsite/…') format('woff'),
  16.          url('scatalogics.com/portfolio/ndxzsite/…') format('truetype'),
  17.          url('scatalogics.com/portfolio/ndxzsite/…') format('svg');
  18.     font-weight: normal;
  19.     font-style: normal;

should be

  1. @font-face {
  2.     font-family: 'RobotoMedium';
  3.     src: url('scatalogics.com/portfolio/ndxzsite/fonts/…');
  4.     src: url('scatalogics.com/portfolio/ndxzsite/fonts/…') format('embedded-opentype'),
  5.          url('scatalogics.com/portfolio/ndxzsite/fonts/…') format('woff'),
  6.          url('scatalogics.com/portfolio/ndxzsite/fonts/…') format('truetype'),
  7.          url('scatalogics.com/portfolio/ndxzsite/fonts/…') format('svg');
  8.     font-weight: normal;
  9.     font-style: normal;
  10. }
  11. @font-face {
  12.     font-family: 'RobotoBold';
  13.     src: url('scatalogics.com/portfolio/ndxzsite/fonts/…');
  14.     src: url('scatalogics.com/portfolio/ndxzsite/fonts/…') format('embedded-opentype'),
  15.          url('scatalogics.com/portfolio/ndxzsite/fonts/…') format('woff'),
  16.          url('scatalogics.com/portfolio/ndxzsite/fonts/…') format('truetype'),
  17.          url('scatalogics.com/portfolio/ndxzsite/fonts/…') format('svg');
  18.     font-weight: normal;
  19.     font-style: normal;

which means that you're missing a / just after the fonts folder. That's why the page is not loading.

scatalogics / 2012-12-04 00:08:37   

Ah ha! That did it. Sorry to waste your time with such a silly problem... I'm not used to writing code, so it's easy for me to miss the slash :P

This thread has been closed, thank you.