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?
Related
Im trying to change my primary font on bigcartel. Heres what I have so far:
#font-face {
font-family: 'kollektifregular';
src: url('kollektif-webfont.woff2') format('woff2'),
url('kollektif-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
The font isn’t changing on my site so please let me know what to fix, thank you!
Using #font-face defines a font, but does not apply it. If you want to apply it somewhere, you can simply say:
h1 {
font-family: 'kollektifregular';
}
or if you want to use it everywhere:
* {
font-family: 'kollektifregular';
}
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/
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
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".