I'm trying to add a custom font to our website using CSS:
body {
background: #999999 url("../images/pattern29.png");
color: #ffffff;
font: 14px/25px Verdana, Verdana, sans-serif;
}
But whenever I change the font it doesn't work. What am I doing wrong?
Try using the #font-face property to add your custom font
#font-face
{
font-family:"YourFontName";
src:url("yourfont.ttf"),
url("yourfont.eot");
/*etc etc*/
font-weight:normal;
font-style:normal;
}
You can then use this font by using the font-family property on your html
body
{
font-family:"YourFontName",Verdana/*etc*/;
}
If you need custom font try web fonts.CSS3 has #font-face that can load font to your web pages,
One helpful and interesting article about #font-face by Paul Irish : Bulletproof #font-face Syntax.
#font-face example:
#font-face{
font-family:MyFont;
src:url(../font/MyFont.eot);
src:local('?'),
url(../font/MyFont.woff) format("woff"),
url(../font/MyFont.otf) format("opentype"),
url(../font/MyFont.ttf) format("Truetype"),
url(../font/MyFont.svg#myfont) format("svg");
}
body{
font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}
You need to embed the font with #font-face first, then you can use it in your css with font-family:
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
You should take a look at FontSquirrel. They have an #font-face generator that will format the fonts for you as we'll as write the CSS you need to include the font in your page.
You can also look at Google's web font API. Same deal, they make it a little easier by allowing you to just add a tag.
Related
I've tried to use Museo fonts in my sites. But i don't know how to use this in a site.
If it is any google fonts like 'Roboto', then i can use by below code:
font-family: 'Roboto', sans-serif;
Now how to use museo fonts?
May i use just 'Museo Slap' or need to use 'Museo Slap', sans-serif;
Either this process can be used to use text in a php file without having to put it in the css
<style type="text/css">
#font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
This is valid only for TFF or WOFF formats of font. replace src with the url of the font on your server. replace "My custom font" and "customfont" with the name of the font you want.
Or you can alternatively add the font to style.css with the code:
.font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
You can omit sans-serif if you wish, however I would recommend keeping it as it provides fallback support if 'Museo Slap' is not available.
For what it's worth, I think Museo Slap is actually known as Museo Slab.
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/
I am using this css script :
#top_menu li a {
display:block;
margin-top:2px;
font-family: 'Federant', cursive;
font-size:16px;
color:#8f7a60;
padding:21px 30px;
border-right:1px solid #1e1a18;
border-left:1px solid #302a26;
}
for a text on my website but it doesn't not make it federant family. How to include it ?
Without any details on the context of the provided CSS, we can only guess the possible issues.
The most likely is that the Federant font is not a standard web font. If it is not installed on the visitor's system, the page cannot use it.
You can provide fallback standard fonts (you should in fact).
You can also, if the licence of the font allows it, embed it in your stylesheet. So the browser will load the font and apply it to the links.
Here's an example of code to embed a font :
#font-face {
font-family: 'Federant';
src: url('fonts/Federant.eot'),
url('fonts/Federant.ttf') format('truetype'),
url('fonts/Federant.svg') format('svg');
font-weight: normal;
font-style: normal;
}
It sounds like the CSS does not know what that font is, so it must be included.
See, there are webfonts which are built-in fonts in the browser, such has sans-serif, arial, serif, etc. If it is not a 'webfont' then it must be manually included.
To do so, you will need the font files, and then you can include them in your CSS like this:
#font-face Federant {
font-family: 'Federant';
src: url(../fonts/Federant.woff);
}
#top_menu li a {
font-family: Federant;
}
I downloaded a font , I'm trying to create a banner in css and I need this font but it just doesn't show up.
#font-face {
font-family: Minecrafter;
src: url("../fonts/Minecrafter_3.ttf") format('truetype');
}
#logo{
width:100%;
height:100px;
background-color: red;
text-align:center;
font-family:Minecrafter;
font-size:40px;
}
Can I check for errors somehow? I'm developing a win8 app.
Different browsers support a different set of font formats, so you need to provide a set of alternatives for each browser (somw of the brwoser support .eot.woff *ttf) so you must proivde alternative src for you fonts :
#font-face {
font-family: Minecrafter;
src: url("font.ttf") format('truetype');
url("font.woff") format('woff');
}
good website for converting the font for the format you want :
https://onlinefontconverter.com
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".