Options

font choice not showing on different computer

ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
edited October 17, 2013 in SmugMug Customization
I chose Buda for the main body text. It shows at home just great, but at work, gone.
This has to do with Buda not being web-compliant, or something like that?
In this case can I define an alternative font from the default?
I.e., Buda, but if not Buda, X?

Comments

  • Options
    thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited October 16, 2013
    Buda, from SmugMug's menu of fonts? What's your web browser at work, something ancient?
  • Options
    ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited October 16, 2013
    No, I'm up to date on both computers.
    FF 24.0 at both.
    IE not working also: IE8 (required for work)
    Chrome 30.x

    Do I have something in my CSS messing me up?
    /* Add personal background image */
    /*html.sm-user-ui { */
    /*background-attachment: fixed;*/
    /*background-image: url(http://www.joinrats.com/photos/i-LJT5VSk/0/M/i-LJT5VSk-M.png);*/
    /*background-position: center top;*/
    /*background-repeat: repeat;*/
    /*background-size: 20%*/
    }
    .sm-breadcrumb
    {
    border-bottom: 1px solid #595959;
    padding-bottom: 4px;
    }
    .sm-tiles-grid .sm-tile-info p {
    /*
    font-size: 95%!important;
    color: gold!important;
    text-align:center;
    */
    padding-left: 0!important;
    padding-right: 0!important;
    overflow: visible !important;
    white-space:normal !important;
    }
    .sm-gallery-slideshow-button
    {
    display: none;
    }
    /*
    remove the buy button
    */
    .sm-gallery-buymenu
    {
    display: none;
    }
    /* Hide the search form and social media links for mobile browsers */
    @media only screen and (max-width: 640px) {
    .sm-search-form, .sm-page-widget-social-links { display: none; }
    }
    /* Add 1 pixel border around the thumbnails and photos */
    .sm-user-ui .sm-gallery-smugmug .sm-image {
    border: 1px solid #4F4F4F;
    padding: 0px;
    }
    /* Set the overflow of the images to be visible so the border actually displays properly */
    .sm-user-ui .sm-gallery-smugmug .sm-tile-content {
    position: relative;
    display: block;
    overflow: visible;
    }
    /* Lightbox: Add the word "Close" next to the X */
    .sm-user-ui .sm-lightbox-tools .sm-lightbox-close:after {
    content: ' Close';
    font-size: 18px;
    }
    /* Set the color of the "X" */
    .sm-user-ui .sm-lightbox-tools .sm-fonticon-XCross2 {
    /* color: #fff !important; */
    }
    .sm-user-ui .sm-lightbox .sm-lightbox-tools {
    padding: 5px;
    }
    /* Set the properties for the entire close box */
    /* If you want to change the color of the "Close" text, uncomment out the color and set your color */
    .sm-user-ui .sm-lightbox-tools .sm-lightbox-close {
    /* background-color: red !important; */
    border: 1px solid #fff;
    /* color: #fff; */
    font-size: 14px;
    opacity: 1.0;
    }
    .sm-user-ui .sm-lightbox-tools .sm-lightbox-expand:after {
    content: ' Full Screen';
    font-size: 18px;
    }
    /* Make the width of the lightbox caption wider */
    .sm-user-ui .sm-lightbox-caption {
    max-width: 1000px !important;
    }
    /* The lightbox caption area is really wide but the text in it is much
    skinner. The scroll bar was very far away. Bring it in to match
    the width of the lightbox caption */
    .sm-user-ui .sm-lightbox-panel {
    max-width: 1010px !important;
    }
    /* Properly center the image pagination */
    .sm-user-ui .sm-gallery-smugmug .sm-gallery-image-pagination {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    }
    /* Change the way the sub-menu bar looks */
    .sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
    padding: 5px 15px 4px 9px !important;
    font-size: 12px;
    border: 1px solid rgba(242,208,152,0.9);
    border-bottom: 1px solid #1F272A !important;
    background-color: rgba(0, 0, 0, 0.0);
    }
    /* Set the background transparency on the navbar */
    /* .sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu, */
    /* .sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu-children { */
    /* background-color: rgba(68, 68, 68, 0.1); */
    /* }*/
    /*/* Turn off the background color that was making it not transparent enough */ */
    /*.yui3-menu-item .yui3-menu-label { */
    background-color: rgba(0, 0, 0, 0.0) !important; */
    /*} */
    /*.yui3-menu .yui3-menu-label:hover { */
    /*background-color: rgba(253, 247, 198, 0.9) !important; */
    /*} */
    /* Set the default navbar submenu background color */
    .yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
    background: #008000;
    }

    /* Set the navbar submenu hover background color */
    .yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
    background: #00F;
    }

    /* Change the border color */
    .yui3-menu .yui3-menu-children, .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
    border-color: #000000;
    /* when a user hovers over a link instead of it instantly going to the hover decoration, it will fade in and out to it */
    a {
    -webkit-transition:color 0.2s ease-in;
    -moz-transition:color 0.2s ease-in;
    transition:color 1.0s ease-in;
    }
    /* Make each sub-menu item fade in/out as the mouse moves over it */
    .yui3-menu-label {
    -webkit-transition:all 0.5s ease-in;
    -moz-transition:all 0.5s ease-in;
    transition:all 0.5s ease-in;
    }
    /* Make thumb background color different */
    .sm-tiles-grid .sm-tiles-list .sm-tile-content {
    background-color: #FDFCC3;
    }
  • Options
    ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited October 16, 2013
    This is what I see. The JoinRats name is the right font, the menu is not Buda.
  • Options
    ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited October 16, 2013
    Maybe at home the font is wrong too, this morning. I can't be in two places at once however. :D
  • Options
    leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 16, 2013
    At my work some things are blocked on web-browsers, like the ability to download Google fonts, so you may be running into that issue. However, sometimes people may not have the font installed and SmugMug only loads 2 Google fonts, so you'd need to force the browser to download additional google fonts. I discuss it over here: http://www.aaronmphotography.com/Customizations/Sitewide/Google-Fonts

    However, I generated the code for you (you're welcome):

    Add this to the VERY top of your theme's advanced CSS settings:
    @font-face {
      font-family: 'Buda';
      font-style: normal;
      font-weight: 300;
      src: 
         url(http://themes.googleusercontent.com/static/fonts/buda/v3/xpKVHc19vcKaqMGd7JtK-A.eot?#iefix) format('embedded-opentype'),
         url(http://themes.googleusercontent.com/static/fonts/buda/v3/3N6IHhwL9GuAVU1WX0Z9CA.woff) format('woff'),
         url(http://themes.googleusercontent.com/static/fonts/buda/v3/In5nPPB6p1Mco64syFRrYQ.ttf) format('truetype');
    }
    

    You should be able to load Buda now (by using the font-family identifier.

    Also, for what it's worth, when you use the font-family, you can add a comma and list additional fonts. The browser tries to load the first, and if it doesn't see it, tries to load the second, etc. So you could do the following and if it doesn't find buda it'll go to arial:
    font-family: 'Buda', Arial;
    
    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
    ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited October 16, 2013
    THANK YOU. wings.gif
    However, adding the code to add additional fonts, reverted the font to whatever it was when it wasn't Buda. I tried arial and georgia, different ways, to no avail. So for the time being I've removed it.

    If I could segue in this thread, is there a way to:
    - reduce the height of the lines of the navbar I have on the home page. Each title is too far apart height-wise.
    - force the titles that wrap, to left indent?

    EDIT: That is, force the wrapping lines to left-indent on the 2nd and any other lines following for that title.
  • Options
    leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 17, 2013
    ChancyRat wrote: »
    THANK YOU. wings.gif
    However, adding the code to add additional fonts, reverted the font to whatever it was when it wasn't Buda. I tried arial and georgia, different ways, to no avail. So for the time being I've removed it.

    If I could segue in this thread, is there a way to:
    - reduce the height of the lines of the navbar I have on the home page. Each title is too far apart height-wise.
    - force the titles that wrap, to left indent?

    EDIT: That is, force the wrapping lines to left-indent on the 2nd and any other lines following for that title.

    Hm. strange. Loading the fonts shouldn't have any effect. ::shrug::

    There is a way to do both but it's too difficult for me to re-create. Send me the HTML in a file again (via email) and I'll take a look.

    Also, I'm not sure what you mean by left indent. As in ... you want the 2nd line to be further to the right than the first line. So it would look something like:
    Using a rattie shuttle with 
      unsocializing rats 
    

    Instead of
    Using a rattie shuttle with
    unsocializing rats
    

    ?
    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
    leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 17, 2013
    Btw, this video slightly explains how I use Google Chrome to get you all these CSS modifications. You could prob. save yourself a lot of time by learning how to do it :)
    http://www.youtube.com/watch?v=Mhb4n0yGYT4

    Any time you need to figure out the code to make it happen just google "CSS font size" or "CSS add a shadow box", etc to get the CSS code options.
    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
    ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited October 17, 2013
    However, adding the code to add additional fonts, reverted the font to whatever it was when it wasn't Buda. I tried arial and georgia, different ways, to no avail. So for the time being I've removed it.

    Hm. strange. Loading the fonts shouldn't have any effect. ::shrug::

    There is a way to do both but it's too difficult for me to re-create. Send me the HTML in a file again (via email) and I'll take a look.

    This happened:
    - the code you gave me to get Buda to work, worked.
    - then I added the code for, "if Buda doesn't work, do Arial". This caused Arial to take over, Buda gone.

    Was that the intention of your code? Since my computer really can't handle Buda, even though you first told it to?

    What percentage of computers in the world will be able to handle Buda, with the code you gave me to add it? I think I haven't understood the consequences of choosing a particular google font. If 95% of viewers will not see Buda, I should rethink this.

    What HTML? Did you mean CSS? - oh, wait, I know what you mean!!! lol. Okay!
  • Options
    ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited October 17, 2013
    leftquark wrote: »
    Btw, this video slightly explains how I use Google Chrome to get you all these CSS modifications. You could prob. save yourself a lot of time by learning how to do it :)
    http://www.youtube.com/watch?v=Mhb4n0yGYT4

    Any time you need to figure out the code to make it happen just google "CSS font size" or "CSS add a shadow box", etc to get the CSS code options.

    I will give this a go but I get shivers thinking about it. I tried using webdeveloper on FF awhile ago and sunk into what felt like mire.
Sign In or Register to comment.