Options

Customized Text Font on a Page - CSS

willtredowilltredo Registered Users Posts: 1 Beginner grinner
edited September 24, 2013 in SmugMug Customization
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

Comments

  • Options
    leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 24, 2013
    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';
}
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,459 Major grins
    edited September 24, 2013
    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'? ne_nau.gif
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Options
    leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 24, 2013
    Hikin' Mike wrote: »
    Shouldn't that say 'font-family' instead of 'font-face'? ne_nau.gif

    Woopsies -- you're quite right!!! I've fixed my original post now :)
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sign In or Register to comment.