I was running my blog through a CSS Validator and found out some fonts that come out of the box are not being defined correctly, to be specific, this is in apostrophe/lib/modules/apostrophe-ui/public/css/global/fonts.less
@apos-ui-font-path: '/modules/apostrophe-ui/fonts/';
.apos-add-font('roboto', @apos-ui-font-path + 'roboto-regular-webfont');
.apos-add-font('roboto', @apos-ui-font-path + 'roboto-light-webfont', normal, 300);
.apos-add-font('roboto', @apos-ui-font-path + 'roboto-bold-webfont', normal, 500);
.apos-add-font('karla', @apos-ui-font-path + 'karla-regular-webfont');
.apos-add-font('karla', @apos-ui-font-path + 'karla-bold-webfont', normal, 700);
using variables added a space in the path, also, there were some extra '' in the compiled/minified css file. Just like the following line:
src: url(''/modules/apostrophe-ui/fonts/' 'roboto-regular-webfont'.eot');
In order to fix this I had to stop using a path variable, something like this:
.apos-add-font('roboto', '/modules/apostrophe-ui/fonts/roboto-regular-webfont');
.apos-add-font('roboto', '/modules/apostrophe-ui/fonts/roboto-light-webfont', normal, 300);
.apos-add-font('roboto', '/modules/apostrophe-ui/fonts/roboto-bold-webfont', normal, 500);
.apos-add-font('karla', '/modules/apostrophe-ui/fonts/karla-regular-webfont');
.apos-add-font('karla', '/modules/apostrophe-ui/fonts/karla-bold-webfont', normal, 700);
Also, moving the apostrophe-ui folder to my own lib folder resulted in duplicated css, so I did the changes in the original folder in node_modules, but this means all changes will be overwritten in the next npm update. Is it ok to remove the module from node_modules to avoid duplicated css code?
Hey thanks for raising this issue. Looks like the proper way to concatenate the string variable with another string looks like this https://github.com/apostrophecms/apostrophe/pull/1604/files
Newly generated CSS passes (that part of the) validator :)
This should be part of the next release