Customized Text Font on a Page - CSS

willtredo

I'm trying to use my own font for the body text on page I created and am using the following CSS code:

@font-face { font-family: Dirty Ego; src: url('http://www.mediafont.com/storage/contents/1120/font.eot'); /* IE */ src: local('Dirty Ego'), url('http://www.mediafont.com/storage/contents/1120/DirtyEgo.ttf'); /* non-IE */ }

When I click on "Customize Site", "Edit Theme", go to the "Advanced" tab and enter this code nothing seems to happen. Anyone know what additional steps are needed to have the font come through?

Thank you!
Will

leftquark

willtredo wrote: »

I'm trying to use my own font for the body text on page I created and am using the following CSS code:

@font-face { font-family: Dirty Ego; src: url('http://www.mediafont.com/storage/contents/1120/font.eot'); /* IE */ src: local('Dirty Ego'), url('http://www.mediafont.com/storage/contents/1120/DirtyEgo.ttf'); /* non-IE */ }

When I click on "Customize Site", "Edit Theme", go to the "Advanced" tab and enter this code nothing seems to happen. Anyone know what additional steps are needed to have the font come through?

Thank you!
Will

Yes ... All you've done is told the web-browser to download the font for the user ... now you need to actually tell the webpage where you want to use 'Dirty Ego'.

for example, if you want the entire page body to use it, you would call it out:

body {
  font-family: 'Dirty Ego' !important;
}

If you just wanted a specific area to be the font, say, the lightbox Photo Title, you'd do it in that CSS call-out:

/* Make the photo title a different font */
.sm-tile-title, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title {
  font-family: 'Dirty Ego';
}

Hikin' Mike

leftquark wrote: »

Yes ... All you've done is told the web-browser to download the font for the user ... now you need to actually tell the webpage where you want to use 'Dirty Ego'.

for example, if you want the entire page body to use it, you would call it out:

body {
  [B]font-face: 'Dirty Ego' !important;[/B]
}

If you just wanted a specific area to be the font, say, the lightbox Photo Title, you'd do it in that CSS call-out:

/* Make the photo title a different font */
.sm-tile-title, .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title {
  font-family: 'Dirty Ego';
}

Shouldn't that say 'font-family' instead of 'font-face'?

leftquark

Hikin' Mike wrote: »

Shouldn't that say 'font-family' instead of 'font-face'?

Woopsies -- you're quite right!!! I've fixed my original post now