First and foremost, I have tried searching and can't really find anything that will help this specific problem.
Basically I have my website http://www.jamesendres.com and I am trying to load a custom web font from http://justanotherfoundry.com/facit-web. When I was developing my website on my local machine it worked flawlessly, but when I uploaded all of my files to Dreamhost, the fonts aren't being loaded.. I opened Firebug and apparently the fonts are being downloaded last so I think this might have something to do with why they aren't being loaded. But I could be wrong. In my main.css file is where all of my font-related configurations are.
For help purposes I have made the homepage default to whatever the browsers default is to show it's not working:
#font-face{
font-family:'FacitWeb-Extralight';
src:url('http://webfonts.justanotherfoundry.com/Facit/FXL');
font-weight:bold
}
p, li{
font-size:14px;
/*font-family:'FacitWeb-Extralight', Verdana, Trebuchet MS, Arial, sans-serif;*/
font-family: FacitWeb-Extralight;
line-height:18px;
}
Instead of simply writing a direct #font-face, you should use one of the font-face generators out there.
I pesonally recommend Font Squirrel. They keep the generator up to date.
The benefits include
Advanced font-face syntax for correct loading across browsers
Automatic IE-style font generation
Good fallback design when #font-face is not supported.
Related
Don't know if this is the right place to ask, but I am quite new to html, have made a complete site and uploaded to web server.
But i tried visiting the site on another device, and the font shows differently, but then when i go onto a website which has a different font it shows fine on their site.
Am i doing something wrong?
Cheers
Adam
Because the computer doesn't have that font, and you didn't include the font to download, just an instruction as to which one to use.
The CSS #fontface instruction lets you direct a browser to a file with a font.
A simpler and lighter approach, is to suggest back-ups. E.g. Instead of:
font-family: arial;
You could use:
font-family: arial, verdana, sans-serif;
The first will try to use Arial, and if it isn't available, will just use the default font for the browser (which could be a serif font like Times, for example).
The second will try to use Arial. If that's not available, it will try to use Verdana. If that's not available, it will try to use the default sans-serif font for the browser, which should at least be closer than a serif font.
Here is a great tutorial on how to create custom fonts on a website.
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
It will also explain which types of fonts are compatible on certain browsers
My website font is font-family: Century Gothic;.
On my PC it works correctly but on other PCs it is changed.
It also doesn't work on the iPhone.
This happens because those PCs and the iPhone do not have the font installed.
If you want to ensure that your font works on as many computers as possible, you should consider using #font-face.
The basic CSS syntax is
#font-face{
font-family: CenturyGothic;
src: url('CenturyGothic.otf');
}
And then
font-family: CenturyGothic, serif; /* Whatever others you want to add */
Six Revisions has a good overview: http://sixrevisions.com/css/font-face-guide/
FontSquirrel will generate the code for you: http://www.fontsquirrel.com/fontface/generator
It should be noted that unless the font is a non-commercial font, you will need a license to use it with #font-face. That is, you will need to purchase the font and maybe even purchase the right to distribute it.
(Thanks to #bookcasey for highlighting the need to add this info)
A good resource for info on licensing is http://blog.themeforest.net/general/font-licensing-for-the-web/
Having said that, there are thousands of freely available fonts - including dozens on the FontSquirrel site - where no licensing is necessary.
I'm building a page with this font, see here: jsfiddle sample
The font is called Cursive; it's not a web-safe font. On Chrome and Firefox, it looks great. However, in IE, it doesn't show.
I'd like to use a #font-face css declaration but I'm wondering where I can find the font file for it? I assume it's already loaded on my computer somewhere; I'd like to find the files I need to them on a server.
Since the fonts we are looking at could be completely different based on what fonts we have installed on our separate machines, why not try What The Font?
Take a screenshot of the text you see and upload it to Whatthefont -- it will detect what font it is using and give you several options to download both free and paid.
From there you can include it in your css file.
Your looking for the actual font file? There are literally hundreds of free font download sites within Google's grasp. Here was my top result.
Once you have found a file you like, ftp it to your server. Then using a css #font-face to include it in your stylesheet.
The benefit of using a service like Googles font api is that it is free and fast - however, there is nothing stopping you from doing this from your own server and with your own file.
<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>
sample via hangy
I can't see it on my machine. But is this the one you're looking for:
http://openfontlibrary.org/font/cursive
It looks like there is an open license, so you could run it through FontSquirrel to get a nice #font-face declaration.
The font that your browser is rendering as 'Cursive' is nothing more than our old friend 'Comic Sans'.
Comic Sans
"Cursive"
Compare the two links to verify
I've been working on my first HTML5/CSS3 site, and it's been going well for the most part. Totally loving the new #font-face property, and it works perfectly on my machine. The problem I'm having is when previewed on another device (computer, ipad, iphone), it doesn't seem to be recognising the #font-face property and uses the fallback font instead.
Site link: http://williamben.com/
Here's the CSS I'm using:
#font-face { font-family: 'League Gothic';
src: url('_/type/league_gothic.otf') format('otf');
}
Any help would be appreciated.
Thanks in advance.
It is working on your computer as you have the font installed. If you disable the fonts it will not work. It is a common mistake using web fonts as most fonts people use as web fonts they also have installed, so if the web font declaration is wrong, they don't spot it.
It looks like the reason is because you are pointing to a font that doesn't exist, or you have the path wrong. http://williamben.com/_/type/league_gothic.otf doesn't exist.
Agree with dstorey. Also, maybe check out font squirrel to get more coverage:
http://www.fontsquirrel.com/fontface/generator
From the looms of things the file path may be wrong. But youll still want to use the fontsquirrel generator because it will give you a few more lines of code that ensure the font works in near every browser. Then has a fallback to a basic font stack if all else fails.
if i want to have some text show up in a calligraphy font, how do i know how it will render of the users computer. How do i know what fonts that person has on the computer or does it matter? any good examples of doing this in css?
would i be better off putting something together in photoshop and saving as an image?
If you are using the font for headings and fancy page elements that are not going to change often I would use an image from photoshop.
If you want to use the font for the main body of text I would suggest defining a font family in css. I would find the font you want to use on your current os if its a font you found and downloaded chances are the end user wont have it. If its a system font or a font that comes with a major software application like ms word there is a good chance it will be available on the end users machine. Once you have found the font you want to use I would then do a little research and see if you can find something similar in a mac flavour and even a Unix flavour.
body
{
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman"
}
Its always good to use a backup font that you know will work on anyone's machine the browser will select the most applicable in the list starting with the first font stated working its way until it finds a match.
You can embed TTF font files into CSS.
A good example of it is here:
/* DejaVu Sans 2.24
http://dejavu.sourceforge.net/wiki/index.php/Main_Page */
#font-face {
font-family: "DejaVu Sans";
src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]")
}
Edit:
Note: This will only work in Firefox, and possibly Chrome.
Microsoft has published a document about how to embed fonts into a web page using the Embedded OpenType format. It involves converting the font to a an EOT file and then referencing it in the stylesheet using the following syntax:
#font-face {
font-family: Piefont;
font-style: normal;
font-weight: normal;
src: url(PIE0.eot);
}
(This was pulled from an official online demo here).
Based on Boldewyn's answer below, I would bet that you could also use a TTF file in the src: parameter.
I tend to use #font-face on my personal websites.. but it depends on what you are doing it for.
First.. the questions.
Is this static text or are we talking about post headlines etc.
If static text, like the main headline, go with an image.
<h1><strong>Same text as the image(seo)</strong></h1>
and in the css
h1 {background:url(/images/use-the-text-as-image-name-for-seo.png) no-repeat top left; width:100px; height:30px;} /* width and height being image width / height /
h1 strong {position:absolute;left:-8000px;}/ makes sure the text doesn't show up over the image, yet doesn't hide it for seo/screen reader purposes */
If you are talking about something that needs to be dynamic, and you need more than graceful degredation, go with sIFR. If graceful degredation is acceptable, go with #font-face
To add to the #font-face supporters: Paul Irish published a version of this CSS declaration, that works in all newer browsers plus all IEs down to IE5.5. However, you need the font as both TTF and EOT formats for this technique to work.
If the license of your font allows this, there are lots of tools to convert back and forth between the formats. Just google for it.