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?
Related
I'm trying to apply the Montserrat font to all elements in my react-native app but can't seem to do it.
I've downloaded all 18 of the ttf files and put them into my assets/fonts folder.
I then tried using react-native-global-props:
import { setCustomText } from 'react-native-global-props';
const customTextProps = {
style: {
fontFamily: 'Montserrat'
}
}
setCustomText(customTextProps);
This didn't do anything to the text components of my app.
I then tried using defaultProps:
Text.defaultProps.style = { fontFamily: 'Montserrat' }
Also had no effect.
I also followed all the steps in this medium post about using custom fonts:
https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e
My main aim is to apply Montserrat font to every element of my entire app. I have a feeling it might have something to do with the font-type itself as Google Fonts say to apply fonts using this:
font-family: 'Montserrat', sans-serif;
However, react-native doesn't like the sans-serif as it has a hiphon so I just excluded it instead.
Any advice on this would be much appreciated.
As noted in the documentation, I changed the base route in order to serve the assets in the right way, doing it like so:
const config = {
// Changes the website's base to work on Github pages
routerBase: process.env.NODE_ENV == 'gh_pages' ? '/my-app/' : '/'
};
module.exports = {
router: {
base: config.routerBase
}
}
With a background picture in index.vue in the pages folder displayed like so:
.home {
background: url('/background.jpg') no-repeat bottom fixed;
background-size: cover;
color: white;
}
Therefore the path should be /my-app/background.jpg, but the image is not displayed as if it tried to find it following the route /.
What am I doing wrong? Please note that the index.html deployed from the dist folder contains the right base like so: <base href="/my-app/">
Changing the url path to ~/static/background.jpg solved the issue, odd when I'm trying to access a static asset from the static folder, where /background.jpg should have been enough.
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.
}
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.
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://