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
Related
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'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.
Anyone come across with this issue?
Windows 7 Chrome web font OTF issue:
I have a web font and adding it with css3...Looks great in FF/IE(or takes the backup)/Safari but in Chrome(Windows) it looks pretty awful:
I tried this: -webkit-font-smoothing: antialiased;
...Which fixes it in Safari but not Chrome and saw here that Mac should work:
Does -webkit-font-smoothing only work on Mac browsers, Not windows?
I checked this too: http://maxvoltar.com/archive/-webkit-font-smoothing
Here is what i have:
#font-face { font-family: SeravekBasic; src: url('/fonts/SeravekBasic-Regular.otf'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased;}
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;}
html, button, input, select, textarea {font-family: SeravekBasic, Arial, Helvetica, sans-serif; color: #000; }
Lastly I tried Mozillas text-rendering see if this would help webkit but nothing:
https://developer.mozilla.org/en-US/docs/CSS/text-rendering
....Not sure if there is something else that can resolve this.
I wouldn't recommend using OTF for webfonts. It causes some rendering issues for people using Windows XP. You're going to have to use a bulletproof font-face syntax with a media query specifying SVG for chrome.
An example for PT Sans
#font-face {
font-family: "PT Sans";
src: url("ptsans.eot");
src: url("ptsans.eot?#iefix") format("embedded-opentype"),
url("ptsans.woff") format("woff"),
url("ptsans.ttf") format("truetype"),
url("ptsans.svg") format("svg");
font-weight: normal;
font-style: normal
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: "PT Sans";
src: url("ptsans.svg") format("svg")
}
}
Chrome uses an older font rendering system, so it doesn't show fonts as clearly. Chrome fonts look best with SVG so you have to specify a media query to serve only Chrome the SVG file. You can find more information on the syntax here: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax.
You should include ttf, eot, woff, and svg formats in your #font-face syntax. The browser won't download each one, it will only download the one it needs. It also adds appropriate fallback. This should solve most of your font rendering issues.You can get the appropriate files for your #font-face rule by using the fontsquirrel generator: http://www.fontsquirrel.com/tools/webfont-generator.
So my solution was to convert this to embedded Open Type:
.eot and also add .woff for other browser support.
This is actually great because it works fine in IE9 (even IE8)
:)
src: url('/fonts/SeravekBasic-Regular.eot');
src: url('/fonts/SeravekBasic-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/SeravekBasic-Regular.woff') format('woff');
I am using two commercial fonts FrenchScriptStd and FuturaStd-Light (I have bought them separately and then using them to create a webpage)
This is my first page using this kind of fonts which are commercial (I have tried googlefonts but they do not have these fonts)...
#font-face {
font-family: 'FrenchScriptStd';
font-style: normal;
font-weight: 400;
src: local('FrenchScriptStd'), url('css/FrenchScriptStd.ttf') format('ttf');
}
#font-face {
font-family: 'FuturaStd-Light';
font-style: normal;
font-weight: 400;
src: local('FuturaStd-Light'), url('css/FuturaStd-Light.ttf') format('ttf');
}
#fontface1{font-family : Font1; }
h1{font-family : Font1; }
#fontface2{font-family : Font2; }
#nav a {font-family : Font2;}
so the french font i want to be displayed when using h1 and futura font when using #nav a
/* Typography
=============================================================== */
h1 { color:#cc6602; font-size:36px; font-family:FrenchScriptStd, arial, serif; font-weight:normal; padding-bottom:14px; }
#nav a {font-family:FuturaStd-Light, arial, serif; text-decoration:none; color:#a8241b; font-size:20px; text-shadow:0 1px #fff; display: block; }
In my pc it seems to work, but in some computers it is not displaying correctly,
Is there a way to correct this, maybe i am messing something up...
I would look into Paul Irish's bulletproof #font-face syntax as the reason why you cannot see the font on 'some computers' is the fact that these computers may have different browsers installed than the browser you were originally testing on that need different font files, other than TrueType.
A syntax that I use and have a lot of success with is:
#font-face {
font-family: 'FrenchScriptStd';
src: url('css/FrenchScriptStd.eot');
src: url('css/FrenchScriptStd.eot?#iefix') format('embedded-opentype'),
url('css/FrenchScriptStd.woff') format('woff'),
url('css/FrenchScriptStd.ttf') format('truetype'),
url('css/FrenchScriptStd.svg#FrenchScriptStd') format('svg');
font-weight: normal;
font-style: normal;
}
I believe that this is the #font-face style FontSquirrel uses.
Note that in your example you have not converted the font to various web formats. Here are some services that you can use online to get all of the files converted:
FontSquirell
Free Font Converter
OTF to WOFF
Font Kit Generator
You should then host these font files locally as you may run into issues with MIME types and headers and the FireFox browser not downloading the font files if the files are hosted externally and not on the same domain for which they are being used.
Also, your milage will vary in mobile browsers and older versions of IE. :)
The fonts have to be installed on every computers on which your web page shall be displayed.