Holderjs with Material Icons continued

[cliveb]

Holder with Material Icons issue started here, added this new issue to follow the new (extended) issue.

Holder with Material Icons work with external resources in html. Move Material Icons external resources to css and holderjs stops working. To illustrate added jsfiddle https://jsfiddle.net/metalcactus/2uyztnyq/8/

Remove from HTML to see mmaterial icons stop working

Also never working

Maybe this is to do with CORS http://stackoverflow.com/questions/39231412/if-i-link-to-an-external-css-on-a-remote-server-with-font-installed-will-it-emb

[mikeatm]

@cliveb im not sure how to import with css and specify the class as is done with <link>, this line from your fiddle looks like it will not work though, its not a valid url
src: url('//fonts.googleapis.com/icon?family=Material+Icons" class="holderjs');
Here is an edited version that seems to work:
https://jsbin.com/voxaduraga/edit?html,css,output (and on fiddle) https://jsfiddle.net/2uyztnyq/11/
@imsky can you comment on how the requirement to specify class on the <link> element affects a css src url? here is something i tried:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5StnKWgpfO2iSkLzTz-AABg.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

seems to work, but not sure whether it can be better.

[mikeatm]

So really it seems to me to be more of a problem with the url and font-family name, googles font servers are properly setup with CORS headers (its google after all). this minimal change should work too:

@font-face {
  font-family: 'Material Icons';
          src: local('Material Icons'), local('MaterialIcons-Regular'), url(//fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5StnKWgpfO2iSkLzTz-AABg.ttf) format('truetype');
}

[imsky]

@mikeatm .holderjs link tags are just used to grab the stylesheet URL to insert into the placeholder. i don't think there's any interaction (aside from obvious name collisions).

[cliveb]

Thanks for CORS correct css headers for Google's material icons. Same story material icons works in html but do not work in Ivan's demo.js which I am trying to reuse as themify.js

Using text= result is placeholder sizes at http://www.socialmrp.com
Using text=mood; result is placeholders spell out mood;

Interesting <object data-src="holder.js/200x200?theme=vine&text= also fails in JSFiddle

https://jsfiddle.net/metalcactus/2uyztnyq/23/

I changed default renderer to holderjs.run default render to renderer: 'canvas', object: 'background' at repo https://github.com/cliveb/socialmrpsite

Chrome dev tools show placeholders never see the material icons fonts. Socialmrp.com almost same svg as holderjs.com

*** www.socialmrp.com / themify.js
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22231%22%20height%3D%22120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20231%20120%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158238adc22%20text%20%7B%20fill%3Anull%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A30pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158238adc22%22%3E%3Crect%20width%3D%22231%22%20height%3D%22120%22%20fill%3D%22%231b2727%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2237.640625%22%20y%3D%2273.2%22%3E231x120%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"

*** holderjs.com / demo.js
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22243%22%20height%3D%22120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20243%20120%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1582390179c%20text%20%7B%20fill%3A%2399c183%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A12pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1582390179c%22%3E%3Crect%20width%3D%22243%22%20height%3D%22120%22%20fill%3D%22%23c0f2a4%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2290.359375%22%20y%3D%2265.1%22%3E243x120%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"

I re-read holderjs doc and stackoverflow and experimented for a solution, no luck.

I am stumped?

[mikeatm]

@cliveb its hard to see whats going on without a simple case on jsfiddle which reproduces your case,
but try changing on this line https://github.com/cliveb/socialmrpsite/blob/master/themify.js#L13
from font=Material+Icons to font=Material Icons ,
if that does not work, create a fiddle that represents what you have tried as exactly as possible.

[cliveb]

@mikeatm Thanks for the guidance. Made no difference setting font=Material+Icons to font=Material Icons. I will try to create a fiddle that represents (no small feat for me, I am learning a lot).

[imsky]

@cliveb please use jsbin instead of jsfiddle - there's some bug causing placeholders not to render correctly (with custom fonts) on jsfiddle