I have defined some font CSS rule which has absolute urls like
#font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 700;
src: local('Oxygen Bold'), local('Oxygen-Bold'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/yVHpdQrmTj9Kax1tmFSx2j8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
but when I do the bundling with absolute URLs. I hit the 400 exception as it's unable to resolve the path.
"NetworkError: 400 Bad Request - Something/Content/css/http:/themes.googleusercontent.com/static/fonts/oxygen/v2/RzoNiRR1p2Mqyyz2RwqSMw.woff"
RzoNiR...Mw.woff
You might want to customize CssRewriteUrlTransform and ignore paths that start with https:// and http://
Related
I need to access to src/assets/fonts/... in public/paymentVerifyCallback.html.
I've written it in this way :
#font-face {
font-family: "IRANSansWeb";
src: url("../src/assets/fonts/ttf/IRANSansWeb.ttf") format("truetype");
}
but it doesn't work, returns " Failed to decode downloaded font: http://localhost:8080/src/assets/fonts/ttf/IRANSansWeb.ttf "
but I have this font file in this address.
what is the problem?
I want to embed 'HelveticaNeueLTCom-BdCn.ttf' in a PDF document. I'm using Grails rendering 0.4.4 Plugin to generate PDF file.
I tried following,
#font-face {
font-family: 'Helvetica';
src: url('${grailsApplication.config.grails.serverURL}/fonts/HelveticaNeueLTCom-BdCn.ttf');
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
but it doesn't work.
The font embedding requires the below steps to be followed. This worked for me.
Try and tell me your feedback
The PdfRenderingService class present inside the plugin should be
edited for this font simulation as below.
protected doRender(Map args, Document document, OutputStream outputStream)
{
def renderer = new ITextRenderer()
// add the real font path from the server to be deployed to.
//I have it in the assets folder of my project
def path=servletContext.getRealPath("/")+"assets/HelveticaNeueLTCom-BdCn.ttf"
ITextFontResolver fontResolver=renderer.getFontResolver();
//add the encoding and embedded types to the font
fontResolver.addFont(path,BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
configureRenderer(renderer)
renderer.setDocument(document, args.base)
renderer.layout()
renderer.createPDF(outputStream)
outputStream.close();
}
Add the below code in your template file
#font-face {
font-family: "Helvetica";
src: url("${grailsApplication.config.grails.serverURL}/assets/HelveticaNeueLTCom-BdCn.ttf") format("truetype"),
url("${grailsApplication.config.grails.serverURL}/assets/HelveticaNeueLTCom-BdCn.woff") format("woff"),
url("${grailsApplication.config.grails.serverURL}/assets/HelveticaNeueLTCom-BdCn.svg#HelveticaNeueLTCom-BdCn") format("svg");
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
#font-face { src:url(${grailsApplication.config.app.serverUrl}/arialuni.ttf) ; -fs-pdf-font-embed: embed; -fs-pdf-font-encoding: Identity-H; }
This worked for me.
Probably the problem is that you have your url value surrounded by ' instead of ".
The difference between them is that, though in Groovy string literals can be made with both, only the ones surrounded by " create GString, which evaluates statements between ${}
This worked for me
#font-face {
src: url("path/to/KF-Kiran.ttf");
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: cp1250;
}
div {
font-family: 'KF-Kiran'; // here give the same name of .ttf file.
}
Ok, I figured out a solution for my problem but I would like to know if anyone can help me understand why this happened.
My app.js has:
app.use(express.static(__dirname + '/public'));
and static files are served as expected.
Except, when I tried to add a background image in my css:
html {
background: url(img/tree.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I had the error:
Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:3000/css/img/tree.jpg". localhost/:1
Now when I change the CSS to
/img/tree.jpg
The file is served correctly -- so here is a question -- there shouldn't be any file at /css/img/tree.jpg so why does the server think an image is sent with text headers instead of just returning resource not found?
Thank you for your help!
Ok figured this out.
I had another route set up to serve up an angular page to consume my REST api.
app.get('*', function(request, response) {
var options = {
root: __dirname + '/public/'
}
response.sendFile('./views/index.html', options);
});
This meant that when the path was set incorrectly in the CSS file for the background image I THINK that express just went ahead and tried to serve up the index.html file. This meant the CSS page was saying that the file was an image, but the server was saying that the file was html. This is why the header appeared to be wrong and there wasn't just a broken link when the app tried to load the image.
So I have been looking around and can't seem to find a solution on how to get PhantomJS to actually display webfonts on screenshots, can anyone tell me if there is a way to do this?
I have been testing and testing for about a week now and finally came up with the answer, know that this might also be a result of me running PhantomJS on a Windows machine. I am currently running PhantomJS v1.9.7 and have found the following solution:
Using this in my CSS file:
#font-face {
font-family: 'Vampiro One';
src: url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.vamp {
font-family: "Vampiro One";
font-size: 1.5em;
}
Instead of the Google recommended "failsafe":
#font-face {
font-family: 'Vampiro One';
font-style: normal;
font-weight: 400;
src: local('Vampiro One'), local('VampiroOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.vamp {
font-family: 'Vampiro One', cursive;
font-size: 1.5em;
}
seems to do the trick. I hope this saves someone from being as frustrated as I have been.
To those who have a hard time spotting the difference, I removed the "local()" fonts to it only point to the one font I really want, as well as removing fallback fonts, I am thinking this has to do with some false positive in either PhantomJS or the WebKit engine.
BundleConfig.cs
bundles.Add(new StyleBundle("~/Content/styles").Include(
"~/Content/css/test.css"
)
);
_Layout.cshtml
#Scripts.Render("~/Content/styles")
Test.css
body{
font-size: 75%;
color: #232323;
text-align: left;
margin: 0px;
padding: 0px;}
This is what Chrome shows as being loaded giving me a Syntax Error about an unexpected token { :
body{font-size:75%;color:#232323;text-align:left;margin:0;padding:0}
I would've selected Abi's answer for the link he provided, but it was a comment rather than an answer. So, I'm posting this as the answer to ensure this question is marked as resolved.
Basically, the link Abi provided stated that the reason for the error is that the browser was trying to load css as though it was javascript.
I realized right away that I was using #Scripts.Render() and should've been using #Styles.Render() instead.