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
Related
I'm developing an android app with phonegap and wanted to use custom fonts. To do so, I was trying to use CSS #font-face and I first made a little test to check if it worked the way I was expecting. I created a simple index.html file and a .css file in the same directory where I also copied the file with the font I wanted to use, which is in woff2 format. Here's the code for the css and html files:
#font-face {
font-family: Roboto_Bold;
src: url(/roboto_bold.woff2) format(woff2);
font-style: normal;
font-weight: 700;
}
p {
font-family: Roboto_Bold;
}
<p>prueba</p>
The problem is that, when I open index.html with Google Chrome, the font roboto_bold doesn't appear. The text is written with the browser default font, and no errors are shown in the console. I've tried everything to solve it (changing the font formats, checking the links, checking my browser version), but I couldn't find a solution. Any idea why #face-font isn't working?
Here is a screenshot of the files in my directory:
Remove the / infront of the font name, as your font file is in the same directory as your CSS file.
Also, try removing the underscore in the font name, and placing it in quotes - http://www.w3schools.com/cssref/pr_font_font-family.asp
#font-face {
font-family: 'RobotoBold';
src: url(roboto_bold.woff2) format(woff2);
font-style: normal;
font-weight: 700;
}
p {
font-family: 'RobotoBold',sans-serif;
}
UPDATE
As your console is showing no errors, it's not a path related issue. I would suggest Chrome is unable to display WOFF2 files, and you may need to include extra versions of the file, such as WOFF. These are the two I use as a bare minimum.
You can create a whole font kit by uploading your font file (copyright applicable) to a webfont generator tool such as https://www.fontsquirrel.com/tools/webfont-generator
I tried the code in a different computer with a version of Chrome for another OS and it worked fine. It seems it was all a problem of platform
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.
Newbie question: Can I embed any font into HTML. For example the Rockwell font?
Thanks!
Yes. Where FontFamilyName is what ever you want to call it and src: url('/font/font.otf'); is a link to the fonts file (much like using a background image).
#font-face {
font-family: FontFamilyName;
font-weight: bold;
src: url('/font/font.otf');
}
You can then use the font like any other font family. ex:
p
{
font-family: FontFamilyName;
}
Google offers a pretty nice service called Webfonts, check it out!
If you follow the bulletproof font-face syntax you can embed most any font into webpages.
You can use a free font-conversion service like font squirrel to convert your font's into the formats you need to support all browsers :)
take a look at #font-face that allows you to use any font on your page - if the user does not have that font installed, it can be downloaded from a server and used to render the web page.
An example
#font-face {
font-family: DeliciousRoman;
src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
font-weight:400;
}
Take a look at font-face website for more details. Be aware that there are some cross browser issues with #font-face - for this, I would recommend looking at the stellar work of Paul Irish in this regard.
It is possible using #font-face in your stylesheet, but you have to remember that IE doesn't always handle these properly. Use this code:
#font-face {
font-family: (the name you want to call it by);
src: url('path/to/font.eof');
}
You can also use .otf, or .ttf.
Not really. You are limited to cross-browser fonts if you want to be sure the page will display the same across browsers.
That being said, there is an interesting service called Typekit that lets you embed fonts using JS and CSS3. It only works for modern browsers.
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.
My website uses the font ff-clifford-eighteen-web-pro-1. I want all my text to be displayed using that font even for the users that don't have it installed on their machine.
Is it possible?
You can use the #font-face generator. It allows you to upload your fonts and it will create a nifty .zip download with CSS and all the related files you need to get your custom font working for your site.
http://www.fontsquirrel.com/fontface/generator
They also have a whole lot of licensed font-kits ready for use on your site too:
http://www.fontsquirrel.com/fontface
Another great site that allows you to "lease" licensed fonts is TypeKit.
http://typekit.com/
You can't. If the font is not on the system where the browser is, the font will not be found and cannot be loaded.
You will need to distribute the font to the client systems (if you have the licensing to do that).
Short answer: you can't
Long answer: you could, but it's not easy and not widely supported. Read this article for more information.
I use Cufon. Works great, but you also have to verify licensing.
Here is a link to A million ways to embed custom fonts (and keep typography nerds off your back)
He recommends sIFR3
With the font stored in a font folder (ex: fontFolder), you would use the #font-face generator to automatically make the user download the font so it would appear wherever on the site you specify. Below, fontFolder represents the directory (folder) where the font files live, and fontName represents the font name (sitting inside the fontFolder). If you currently have the .eot .tff .woff, and .svg variations of the font stored in the fontFolder, you can copy the below code into the top of your style sheet and replace fontFolder with your own directory's name, and replace fontName with the name of your font:
#font-face {
font-family: "fontName";
src: url('fontFolder/fontName.eot');
src: url('fontFolder/fontName.eot?#iefix') format('embedded-opentype'),
url('fontFolder/fontName.woff') format('woff'),
url('fontFolder/fontName.ttf') format('truetype'),
url('fontFolder/fontName.svg')format('svg');
}
When you're ready to use your font, just use its name:
h1 {
font-family: yourFont;
}