Hi I have just started developing in Monaca IDE and I can't seem to implement fonts in my phonegap app.
#font-face {
font-family: "customfont";
src: url("components/monaca-onsenui/css/font_awesome/fonts/Roboto-Light.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body {
font-family: "customfont";
font-size:30px;
}
This is the css for the font that i want to use, and it is not implemented...
Can someone shed some light on this?
Are you sure the URL is correct? Is the font file loaded correctly?
The following code should work:
#font-face {
font-family: 'Roboto';
src: url('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/font/roboto/Roboto-Regular.ttf');
}
body {
font-family: 'Roboto';
font-size: '30px';
}
http://codepen.io/argelius/pen/XbWzMV
Related
I am trying to add a custom font to me THREE.js scene, but for some reason it doesnt seem to work?
here is my css :
#font-face {
font-family: : "Space";
src: url("../font/space age.ttf") format("truetype");
}
body {
margin: 0;
font-family: 'Space';
}
Anyone have any idea why this might not be working?
I have a problem importing a font to my CSS file, and I can't understand the problem.
The code:
#font-face {
font-family: 'Reg';
font-style: normal;
font-weight: 400;
src: local('Reg'), url(carmelit.ttf) format('ttf');
}
body{
font-family: 'Reg';
}
This is not working, and not because I'm overriding it later on. The file "carmelit.ttf" is in the same folder as the CSS file.
format('ttf') should be format('truetype')
You can also remove the local info unless you're supporting ancient versions of IE.
You should also try like this:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
I'm using #font-face to try and load a custom font on my website, at least on google chrome.
Still, I'm having a hard time doing so... can anyone help?
<style type="text/css">
#font-face {
font-family: Folks;
url(http://www.vtxfactory.com/Folks-Normal.ttf) format('truetype'),
}
body {
background-color: #000000;
text-align: center;
color: #FFF;
font-family: Folks;
}
</style>
The font name is "Folks" but I'm only using "Folks-Normal" as I don't use the bold version. The font is already allocated on the directed url source.
You can see on http://www.vtxfactory.com/ that when you enter, font-family changes to Times New Roman and don't load my custom font.
Best Regards,
Rui Farinha.
I think you've missed required src property and semicolon at the end:
#font-face {
font-family: Folks;
src: url('http://www.vtxfactory.com/Folks-Normal.ttf') format('truetype'); //<-- semicolon
}
Change the url in the CSS to path
#font-face {
font-family: Folks;
src: url(/path/to/your/font/file/Folks-Normal.ttf) format('truetype'),
}
you can use this service too
http://www.font2web.com/
Here is the Ruby on Rails view code
<style type="text/css">
#font-face {
font-family: 'MyFont';
src: url('<%= asset_path('pricedown.ttf') %>');
}
h1.my-font {
font-family: "MyFont", Verdana, Tahoma;
font-size: 50px;
}
</style>
<h1 class="my-font">the rascals</h1><hr>
The code's output is like this
The custom Font is of course loaded but I am not getting it like what I saw by opening the actual font file... Actual font file looks like this..
As you can see, letters like 'h' and 'r' not showing properly.
Is it because I missed something in the CSS part?
Try to fresh download and use the font.
h1.my-font {
font-family: "MyFont";
font-size: 50px;
}
should work
I am using a Grails rendering plugin to generate PDF.
I want to include CSS with my PDF to render it nicely. I found an example on the rendering plugin website
I put the CSS below in print media so that it works for PDF, but this does not work for me. I also do not know how to change the font from Arial to another font. Can someone explain this to me?
The plugin uses Arial font with this CSS:
#font-face {
src: url(path/to/arial.ttf);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: cp1250;
}
body {
font-family: "Arial Unicode MS", Arial, sans-serif;
}
You need arialuni.ttf not just arial.ttf download it here: http://www.findthatfonts.com/search-2683324-hTTF/fonts-download-search-engine-ARIALUNI.ttf.htm
Then
You have to give your #font-face a font-family name like this:
#font-face {
font-family: "Font-Name";
src: url(path/to/font.ttf); // you have to add your font.ttf file to the server in a folder like assets/css/fonts or something.
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: cp1250;
}
body {
font-family: "Font-Name", Arial, sans-serif; // you called your font Font-Name in the #font-face so now you can use it as Font-Name everywhere else in you css.
}
Otherwise your arialuni.ttf has no name so you can't use it in other divs in your css.
The next is working for me good:
#font-face {
font-family: 'Calibri';
src: url(${grailsApplication.config.grails.serverURL}/fonts/calibri.ttf);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
The -fs-pdf-font-encoding should be set in Identity-H.
And after it you can add something like
body {
font-family: 'Calibri';
}
It doesn't really matter what name you give the font, as long as you choose a name for the src you provide between te #font-face brackets, like font-family: "SomeName";.
Now, you can use the font everywhere using font-family: "SomeName".