More than two fonts problems

eb11webeb11web Registered Users Posts: 6 Beginner grinner
edited May 28, 2015 in SmugMug Customization
Hi Friends,

New poster here, good to meet all of you! Anyhow, I'm trying to get my new site together, and am running into some problems trying to add more than two fonts using leftquark (Aaron's) @font-face workaround. I'd love if anyone could point out where I'm going wrong.

I've added the following code to my theme's CSS:

@font-face {
font-family: 'Annie Use Your Telescope';
font-style: normal;
font-weight: 400;
src:
url(http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGmehdpvxL2DeiYJNaARJyxL3rGVtsTkPsbDajuO5ueQw.eot) format('embedded-opentype'),
url(http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGgtSTT_xyPSRqbb82lxMsRF2IY20qb3OO3nusUf_NB58.woff) format('woff'),
url(http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGtHf9zmWs0oMQOHwtCnidY52IY20qb3OO3nusUf_NB58.ttf) format('truetype');
}


And have tried to access the uploaded font on my about page, in which I have an HTML block with the following code:

<p style="background-color:rgba(255, 255, 255, 0.93); -moz-border-radius: 6px; border-radius: 12px; padding: 20px; font-size: 20px; font-size: 2.4vw; color:#311402; font-family: 'Annie Use Your Telescope'; opacity: 0.6; text-align:center; line-height: 110%;
"> Text
</p>

It isn't working for me, though.


Here is a link to my about page:

http://www.evanbeinecke.smugmug.com/About



The other issue I'm struggling with is how to get the text boxes on the about page to line up with the photos they're matched with, regardless of browser window size (short of just making a PNG file in photoshop and making it all one image). I tried to accomplish that by using vertical spacers that scale according to page width:

<p style="
height:12vw;
"></p>

But they don't scale nearly as fast as the photo does as I change the browser window. Any input on how I could do that more effectively would also be greatly appreciated!

Comments

  • rainforest1155rainforest1155 Registered Users Posts: 4,566 Major grins
    edited May 24, 2015
    Hi and welcome to DGrin! wave.gif

    I'll leave your font question to someone else. In regards to your second question, the best option I see would be to split up the different photos and text boxes into multiple "single photo" content blocks and then have a separate html content block next to the appropriate photo. That way, the photo and text would be linked and getting the text to align properly should be much easier.

    The way you've currently set it up with the page layout set to stretchy, I don't think there'd be an easy way to keep the two columns in check for the huge variety of screen / browser window sizes out there. If you didn't want to split up the photos in different single photo blocks, you could consider setting your page to a fixed width instead of stretchy in the "layout" tab. That way, you could ensure that the dimensions of the photos wouldn't change.
    Sebastian
    SmugMug Support Hero
  • eb11webeb11web Registered Users Posts: 6 Beginner grinner
    edited May 25, 2015
    Hi and welcome to DGrin! <img src="https://us.v-cdn.net/6029383/emoji/wave.gif&quot; border="0" alt="" >

    I'll leave your font question to someone else. In regards to your second question, the best option I see would be to split up the different photos and text boxes into multiple "single photo" content blocks and then have a separate html content block next to the appropriate photo. That way, the photo and text would be linked and getting the text to align properly should be much easier.

    The way you've currently set it up with the page layout set to stretchy, I don't think there'd be an easy way to keep the two columns in check for the huge variety of screen / browser window sizes out there. If you didn't want to split up the photos in different single photo blocks, you could consider setting your page to a fixed width instead of stretchy in the "layout" tab. That way, you could ensure that the dimensions of the photos wouldn't change.

    Hi Rainforest,

    Thanks for the input on the second problem! As you suggested, I broke the merged photos to single photos, which got me most of the way there. I still have one issue with the way it's displaying though: how can I get the html text boxes to vertically align with the photos so that they're always displaying next to the center of the photo? As opposed to moving about the way I've coded it now:

    <p style="
    height:6vw;
    "></p>

    <p style="background-color:rgba(255, 255, 255, 0.93); -moz-border-radius: 6px; border-radius: 12px; padding: 20px; font-size: 20px; font-size: 1.8vw; color:#311402; font-family: Coming Soon; opacity: 0.6; text-align:center; line-height: 110%;
    ">Improving on that old, beat up, local piano, seemingly without a care in the world.
    </p>

    I tried adding a vertical-align:middle; but that didn't seem to do anything, probably because it's only effect the text within the subcontainer, rather than within the smugmug container. Being quite new to coding, I have no idea how I would alter that.


    If anyone has any input on the first question, it would be very appreciated!
  • eb11webeb11web Registered Users Posts: 6 Beginner grinner
    edited May 26, 2015
    Just spent another hour fiddling with the @font-face problem... I'm a bit at a loss as to why it's not working.
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 26, 2015
    Have you tried this:
    @font-face {
      font-family: 'Annie Use Your Telescope';
      font-style: normal;
      font-weight: 400;
      src:  local('Annie Use Your Telescope'), 
            local('AnnieUseYourTelescope'), 
            url('http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGmehdpvxL2DeiYJNaARJyxL3rGVtsTkPsbDajuO5ueQw.eot'),
            url('http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGmehdpvxL2DeiYJNaARJyxL3rGVtsTkPsbDajuO5ueQw.eot?#iefix') format('embedded-opentype'),
            url('http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGka-vN3cnM35kL5a2hXIL_33rGVtsTkPsbDajuO5ueQw.woff2') format('woff2'), 
            url('http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGgtSTT_xyPSRqbb82lxMsRH3rGVtsTkPsbDajuO5ueQw.woff') format('woff'),
            url('http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGtHf9zmWs0oMQOHwtCnidY52IY20qb3OO3nusUf_NB58.ttf') format('truetype');
    }
    
  • eb11webeb11web Registered Users Posts: 6 Beginner grinner
    edited May 27, 2015
    Have you tried this:
    @font-face {
      font-family: 'Annie Use Your Telescope';
      font-style: normal;
      font-weight: 400;
      src:  local('Annie Use Your Telescope'), 
            local('AnnieUseYourTelescope'), 
            url('http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGmehdpvxL2DeiYJNaARJyxL3rGVtsTkPsbDajuO5ueQw.eot'),
            url('http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGmehdpvxL2DeiYJNaARJyxL3rGVtsTkPsbDajuO5ueQw.eot?#iefix') format('embedded-opentype'),
            url('http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGka-vN3cnM35kL5a2hXIL_33rGVtsTkPsbDajuO5ueQw.woff2') format('woff2'), 
            url('http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGgtSTT_xyPSRqbb82lxMsRH3rGVtsTkPsbDajuO5ueQw.woff') format('woff'),
            url('http://fonts.gstatic.com/s/annieuseyourtelescope/v6/2cuiO5VmaR09C8SLGEQjGtHf9zmWs0oMQOHwtCnidY52IY20qb3OO3nusUf_NB58.ttf') format('truetype');
    }
    


    Thanks so much for taking a crack at it, Hikin' Mike. I dropped it in my CSS, but I'm still getting nothing when I call on that font in my html block : /

    Do you think there is something more systemic at play? Like that I'm trying to call on it through an html block or something?

    If anyone can figure this out, it would be absolutely amazing.
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 28, 2015
    The code works on my testing site. I put the @font-face code into my Theme's CSS and I added this to a HTML/CSS block:

    CSS:
    .annie-font {
    	font-family: 'Annie Use Your Telescope';
    	font-style: normal;
    	font-weight: 400;
    	font-size: 20px; 
    	font-size: 2.4vw; 
    	color: #311402;
    	line-height: 110%;	
    	background-color: rgba( 255, 255, 255, 0.93 ); 
    	border-radius: 12px; 
    	-moz-border-radius: 6px; 
    	padding: 20px; 
    	opacity: 0.6; 
    	text-align: center; 
    	}
    

    HTML:
    [html]
    <div class="annie-font">Testing Annie Use Your Telescope font.</div>
    [/html]
  • eb11webeb11web Registered Users Posts: 6 Beginner grinner
    edited May 28, 2015
    The code works on my testing site. I put the @font-face code into my Theme's CSS and I added this to a HTML/CSS block:

    CSS:
    .annie-font {
    	font-family: 'Annie Use Your Telescope';
    	font-style: normal;
    	font-weight: 400;
    	font-size: 20px; 
    	font-size: 2.4vw; 
    	color: #311402;
    	line-height: 110%;	
    	background-color: rgba( 255, 255, 255, 0.93 ); 
    	border-radius: 12px; 
    	-moz-border-radius: 6px; 
    	padding: 20px; 
    	opacity: 0.6; 
    	text-align: center; 
    	}
    

    HTML:
    [html]
    <div class="annie-font">Testing Annie Use Your Telescope font.</div>
    [/html]

    http://gallery.imagesinthebackcountry.com/Smugmug-customization/Test-Page



    Thanks so much for your help, Hikin' Mike. Your surety that it worked made me do some more troubleshooting. What I've discovered is that a different, seemingly unrelated, part of my CSS code is interfering with the @font-face code. In particular, the following code from sherlock photography, which I use to shrink the gallery thumbnails in my Poetry section, is interfering:

    /* Add three columns to gallery icons from http://www.sherlockphotography.org/Customisations/Smaller-gallery-icons */
    /* Add two columns to gallery icons */
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-10 .sm-tile-wrapper {
    width:8.33%;
    }
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-9 .sm-tile-wrapper {
    width:9.09%;
    }
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-8 .sm-tile-wrapper {
    width:10%;
    }
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-7 .sm-tile-wrapper {
    width:11.11%;
    }
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-6 .sm-tile-wrapper {
    width:12.5%;
    }
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-5 .sm-tile-wrapper {
    width:14.28%;
    }
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-4 .sm-tile-wrapper {
    width:16.66%;




    Any idea's why that would be the case? And if there is a way to preserve both's functionality? I could just use a different theme on the About page to get around it, but I'm curious now...
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 28, 2015
    eb11web wrote: »
    Thanks so much for your help, Hikin' Mike. Your surety that it worked made me do some more troubleshooting. What I've discovered is that a different, seemingly unrelated, part of my CSS code is interfering with the @font-face code. In particular, the following code from sherlock photography, which I use to shrink the gallery thumbnails in my Poetry section, is interfering:

    /* Add three columns to gallery icons from http://www.sherlockphotography.org/Customisations/Smaller-gallery-icons */
    /* Add two columns to gallery icons */
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-10 .sm-tile-wrapper {
    width:8.33%;
    }
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-9 .sm-tile-wrapper {
    width:9.09%;
    }
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-8 .sm-tile-wrapper {
    width:10%;
    }
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-7 .sm-tile-wrapper {
    width:11.11%;
    }
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-6 .sm-tile-wrapper {
    width:12.5%;
    }
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-5 .sm-tile-wrapper {
    width:14.28%;
    }
    .sm-page-widget-pages .sm-tiles-grid.sm-tiles-col-4 .sm-tile-wrapper {
    width:16.66%;




    Any idea's why that would be the case? And if there is a way to preserve both's functionality? I could just use a different theme on the About page to get around it, but I'm curious now...

    I'm not seeing any problems on your Abut page. Did you fix it?

    Not familiar with his code, but that shouldn't effect the @font-face.
  • eb11webeb11web Registered Users Posts: 6 Beginner grinner
    edited May 28, 2015
    I'm not seeing any problems on your Abut page. Did you fix it?

    Not familiar with his code, but that shouldn't effect the @font-face.

    I have no idea why it would either, but it does. I was able to fix the problem by duplicating my theme (but removing that code) and applying it to the About page only. Haven't a clue why it interferes, but I'm glad I was able to nail down the problem. Thanks again for your help.
Sign In or Register to comment.