custom fonts stopped working

ashishpandey

I have been using fontawesome via css @font-face or quite some time on my smugmug page to render a nice menu. This is the same as described here. However, i recently noticed it had stopped working. The reason seems like smugmug is stripping off the src tags from the @font-face CSS block

My site is here: http://photography.ashishpandey.com/

the CSS block I am adding looks like this:

@font-face {
  font-family: 'FontAwesomeCdn';
  src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),
   url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), 
   url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), 
   url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), 
   url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: 400;
  font-style: normal;
}

What I get after publishing the site is this:

@font-face{font-family:'FontAwesomeCdn';font-weight:400;font-style:normal}

clearly, the src attribute is missing and hence the font doesn't work
This worked fine until very recently, so no idea what is wrong now. Can someone please help?

photoclick

I checked my site where I define custom font in the @font-face block and all works fine - what si see in my CSS block is what is being published. The only difference I need to point is that I use Google fonts and and you do not. Is it possible Smugmug strips out non-google fonts?

Hikin' Mike

It's possible the link (link to the font) doesn't work. I have a custom font for as an example here and it works fine: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts

ashishpandey

Hikin' Mike wrote: »

It's possible the link (link to the font) doesn't work. I have a custom font for as an example here and it works fine: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts

I put the URLs in my css block into the browser, and they do download a corresponding webfont file. I am not sure if I am missing something in the syntax or something else has gone wrong. Can someone take my CSS snippet and try it out to confirm it works on their smugmug account?

I have also generated the following links directly from fontawesome CDN which works in my test, but ends up with stripped src attributes on smugmug

@font-face {
  font-family: 'FontAwesome';
  src: url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.eot');
  src: url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
       url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.woff2') format('woff2'),
       url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.woff') format('woff'),
       url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.ttf') format('truetype'),
       url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Hikin' Mike

ashishpandey wrote: »

I put the URLs in my css block into the browser, and they do download a corresponding webfont file. I am not sure if I am missing something in the syntax or something else has gone wrong. Can someone take my CSS snippet and try it out to confirm it works on their smugmug account?

I have also generated the following links directly from fontawesome CDN which works in my test, but ends up with stripped src attributes on smugmug

@font-face {
  font-family: 'FontAwesome';
  src: url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.eot');
  src: url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
       url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.woff2') format('woff2'),
       url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.woff') format('woff'),
       url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.ttf') format('truetype'),
       url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

I used your @font-face and added it to my theme's CSS. Then I added a HTML/CSS block on my testing site and it worked fine. <img src="https://us.v-cdn.net/6029383/emoji/ne_nau.gif&quot; border="0" alt="" >

HTML:
[html]
div id="social-media-buttons" class="buttons">
<ul id="social-media-buttons-items" class="buttons-items">
<li><a href="https://www.facebook.com/ImagesInTheBackcountry"><span class="screen-reader-text">Facebook</span></a></li>
<li><a href="http://www.flickr.com/people/imagesinthebackcountry"><span class="screen-reader-text">flicr</span></a></li>
<li><a href="https://plus.google.com/116009632176436768157"><span class="screen-reader-text">Google+</span></a></li>
<li><a href="http://twitter.com/HikinMike"><span class="screen-reader-text">Twitter</span></a></li>
<li><a href="http://www.pinterest.com/mikematenkosky/"><span class="screen-reader-text">Pinterest</span></a></li>
<li><a href="http://www.imagesinthebackcountry.com/feed/"><span class="screen-reader-text">Feed</span></a></li>
</ul>
</div>
[/html]

CSS:

#social-media-buttons li a::before {
	display: 				inline-block;
	padding: 				0 3px;
	font-family: 			'FontAwesome';
	font-size: 				32px;
	font-style: 			        normal;
	font-weight: 			normal;
	font-variant: 			normal;
	line-height: 			1;
	vertical-align: 		        middle;
	-webkit-font-smoothing:       antialiased;
	}

#social-media-buttons li a::before {font-size: 24px;}
#social-media-buttons li a[href*="facebook.com"]:before {        			content: '\f09a'; }
#social-media-buttons li a[href*="twitter.com"]:before {         			content: '\f099'; }
#social-media-buttons li a[href*="flickr.com"]:before {		  		content: '\f16e'; }
#social-media-buttons li a[href*="plus.google.com"]:before {     			content: '\f0d5'; }
#social-media-buttons li a[href*="pinterest.com"]:before {       			content: '\f0d2'; }
#social-media-buttons li a[href*="imagesinthebackcountry.com"]::before {	content: '\f09e'; }

#social-media-buttons ul {
	list-style: none;
	margin: 	0;
	text-align: center;
	}
#social-media-buttons ul li {
	display:	inline-block;
	margin: 	0 5px;
	}

Hikin' Mike

Out of curiosity I uploaded the font to one of my non-SmugMug sites and it didn't work. I'm about ready to call it a night, but I'm going to look into it in the morning.

Hikin' Mike

Apparently SmugMug changed something. I checked Tom's tutorial (http://www.photom.me/Blog/Importing-Fonts-to-SmugMug) and the font he's using on that tutorial doesn't display either.

SmugMug needs to fix this.

David_S85

Due to what Mike has found out, I am moving this thread to Bug Reports.

Hikin' Mike

David_S85 wrote: »

Due to what Mike has found out, I am moving this thread to Bug Reports.

Thanks for moving it.

I spent most of the afternoon (I was bored) trying to "make it work". I gave up figuring it was a recent bug.

Hikin' Mike

Just to add...

You can still add fonts using Google fonts and this works for 'FontAwesome':

@font-face {
  font-family: 'FontAwesome';
  src: url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.eot');
  src: url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
       url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.woff2') format('woff2'),
       url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.woff') format('woff'),
       url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.ttf') format('truetype'),
       url('//use.fontawesome.com/releases/v4.6.3/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

But any non-Google fonts uploaded by a different site or even using DropBox does not work.

ashishpandey

yes, it does look broken
Thanks for confirming. I also did some further tests, and it does look like smugmug is doing something selective with font URL's. I can use the exact same font-face on a non-smugmug website and it works fine. see example: http://apandeys.weebly.com/

The fact that the font-face declaration shows differently in the published website from what is in my customization is good enough indication that smugmug is changing something here

I will reach out to support and see what they say

ashishpandey

I have left a comment on Tom's site, anyone trying it right now may be pulling their hair otherwise

Also worth a note that any google fonts served via fonts.gstatic.com do not seem to work as well. As an example, Google Material Icons don't work if I use this CSS

Hikin' Mike

ashishpandey wrote: »

Also worth a note that any google fonts served via fonts.gstatic.com do not seem to work as well. As an example, Google Material Icons don't work if I use this CSS

SmugMug offers 'Lora' but not the italic version, so add this to my site-wide theme's CSS and it works. I checked yesterday and there is a difference between the generic 'italic' and the font's version.

@font-face {
	font-family: 'Lora';
	font-style: italic;
	font-weight: 700;
	src: url('http://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7fY6323mHUZFJMgTvxaG2iE.eot'),
		 url('http://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7fY6323mHUZFJMgTvxaG2iE.eot?#iefix') format('embedded-opentype'),
		 url('http://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7VtXRa8TVwTICgirnJhmVJw.woff2') format('woff2'), 
		 url('http://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'),
		 url('http://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
	}

leftquark

It looks like my custom fonts are still working fine, however, I'll pass this on to the team to investigate further....

tomnovy

Ok I did one more test - It looked that I removed part of the code by mistake and my font stopped working. I have corrected it and the font on my article is working again correctly:

http://www.photom.me/Blog/Importing-Fonts-to-SmugMug

Hikin' Mike

tomnovy wrote: »

Ok I did one more test - It looked that I removed part of the code by mistake and my font stopped working. I have corrected it and the font on my article is working again correctly:

http://www.photom.me/Blog/Importing-Fonts-to-SmugMug

Glad it's working for you. I actually tried your example and it worked.

Still can't see the example fonts (FontAwesome and Karate) I set up on my test page.

ashishpandey

OK, seems we are getting somewhere. Heard back from Tom on my support ticket, and looks like it only works if the @font-face declaration is put in the CSS section under CUSTOMIZE → CONTENT AND DESIGN → THEME → ADVANCED tab. Earlier I had it under a CSS content block under CUSTOMIZE → CONTENT AND DESIGN → CONTENT tab, and that had worked for a while, but it does not work that way anymore

Since there is a way to achieve this, I have no more complaints

Thanks to both Mike and Tom (and separately to both, if Tom from support is different from tomnovy above)

tomnovy

ashishpandey wrote: »

OK, seems we are getting somewhere. Heard back from Tom on my support ticket, and looks like it only works if the @font-face declaration is put in the CSS section under CUSTOMIZE → CONTENT AND DESIGN → THEME → ADVANCED tab. Earlier I had it under a CSS content block under CUSTOMIZE → CONTENT AND DESIGN → CONTENT tab, and that had worked for a while, but it does not work that way anymore

Since there is a way to achieve this, I have no more complaints

Thanks to both Mike and Tom (and separately to both, if Tom from support is different from tomnovy above)

I am glad I could help! Tom from support and tomnovy - same person :}

Hikin' Mike

I've always used my site-wide theme's CSS and THIS DOES NOT WORK.

leftquark

Mike,
Can you share some code with me that doesn't work for you, so we can dig deeper?

Hikin' Mike

I'm not using it on my site, just as an example here: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts

I thought it was displaying but when I removed the 'local('Karate Medium');' from the @font-face, it "broke". This is what I'm using on my theme's CSS:

@font-face {
    font-family: 'karatemedium';
    src: url('http://www.imagesinthebackcountry.com/fonts/karate/karate-webfont.eot');
    src: url('http://www.imagesinthebackcountry.com/fonts/karate/karate-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.imagesinthebackcountry.com/fonts/karate/karate-webfont.woff2') format('woff2'),
         url('http://www.imagesinthebackcountry.com/fonts/karate/karate-webfont.woff') format('woff'),
         url('http://www.imagesinthebackcountry.com/fonts/karate/karate-webfont.ttf') format('truetype'),
         url('http://www.imagesinthebackcountry.com/fonts/karate/karate-webfont.svg#karatemedium') format('svg');
    font-weight: normal;
    font-style: normal;
}	

It works because I can see it here: http://www.imagesinthebackcountry.com/fonts/karate/karate-demo.html

Hikin' Mike

Okay after spending the better part of the day, it's my server. It wouldn't load a font unless it's on the same domain, including subdomains. I found this https://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems and add this to my .htaccess and works like a charm now!