More than two fonts problems

eb11web · May 23, 2015

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!

rainforest1155 · May 24, 2015

Hi and welcome to DGrin!

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.

eb11web · May 25, 2015

rainforest1155 wrote: »

Hi and welcome to DGrin! <img src="https://us.v-cdn.net/6029383/emoji/wave.gif" 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!

eb11web · 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' Mike · 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');
}

eb11web · May 27, 2015

Hikin' Mike wrote: »

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' Mike · 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]

eb11web · May 28, 2015

Hikin' Mike wrote: »
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' Mike · 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.

eb11web · May 28, 2015

Hikin' Mike wrote: »

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.

More than two fonts problems

Comments