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.
Related
My site's text is 'Cooper Black' as dictated by in my CSS. When viewed in Android Chrome browser i see that the text is default and not Cooper Black.
I'm assuming my font is not preloaded, anything i can do?
.sitetext-white {
font-family: 'Cooper Black';
color: white;
}
Cooper Black is not what we call a Web Safe Font, because it is not found on a high percentage of OS's. Even then, font's like Arial are only found on Windows machines so they need to have a fallback.
The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:
If you want to use a non-standard font, we have what we call Font Face.
With the #font-face rule, web designers do no longer have to use one of the "web-safe" fonts.
In the new #font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file(s).
If you want to find a nice font to use with #font-face, I would suggest you head over to Font Squirrel and use the Webfont Generator.
How to best set up your #font-face syntax can be found on this article by Paul Irish from Google:
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
This is the Fontspring #font-face syntax. I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses. Of course, the problem at the center of this is that IE needs an .eot font, and the other browsers must take a .ttf or .otf.
If your application is on the web, you can also use Google Fonts which has a very nice library, and means that all you need to do is link to it in your website.
I'm trying to make my webpage use the font Segoe Print, which is not a default browser font. I have the ttf file though, is there any way I can employ this .ttf file so that every visitor (no matter what browser) can see the font ?
I searched and found some solutions, one was saying "Convert the font using this site"
but it gives the error:
Microsoft has requested that their font Segoe Print to be blacklisted
by the generator
So how can I use this font on my website ?
I also found a solution that suggests the following CSS rule :
#font-face
{
font-family: myFirstFont;
src: url('Segoe.ttf'),
url('Segoe.eot'); /* IE9 */
}
But, will it work in non-windows browsers? I mean, does the user have to have the ttf file in their computer, or will it be loaded from my website ?
Thanks !
You cannot, in any legal and morally acceptable way. It would be illegal and morally wrong to give advice on committing the crime that such unauthorized use would constitute.
You should thus either abandon the idea or try and find a free font, or a font that may be legally used for a fee, with characteristics sufficiently similar to the font that you want to use.
You can use Kirsle to convert your TTF font to EOT. Then you need to import three format of your font in the top of your CSS, with this format:
#font-face {
font-family: 'Segoe’;
src:url('fonts/Segoe.eot?#’) format(‘eot’),
url(‘fonts/Segoe.woff’) format(‘woff’);
url(‘fonts/Segoe.ttf’) format(‘truetype’);
}
Remeber to have the ?#, it will deceive the IE to only see the first line and download it, as other browsers can't see the first line and will download the TTF format & New browsers will download the WOFF that have a less size, so will download faster.
Simply use font-family: Segoe to change an item's font in your CSS.
Why not buy it? There are reputable sources where you can purchase a license to use this font as a web font.
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 am new to designing pages, and am starting off with basic HTML.
<font face="arial">Text</font>
I understand that the above displays Text in arial font face.
What are all the options that I have to put in place of arial? Is there a list or something for this?
First, start using instead of using <font> tag, use CSS (ie. font-family - Reference: CSS font-family Property)
Then you can look over Font Squirrel to see all sort of fonts that you can use and are easy to adapt with your site.
For full tutorial on CSS start doing this entire series of tutorials with CSS : CSS Tutorial
Also here is a list of safe web fonts: List of Web Safe Fonts
What are all the font faces that I can use?
You can choose what ever font face you like, but keep in mind that the browser will fall back on some other font if it does not have the particular font you're requesting to use.
The best thing you can do is to stick to some commonly available font faces. Here are a few good lists of such fonts:
list of safe fonts for use on a html webpage
HTML Font Face: Here is most common fonts
HTML Goodies Font List
Well now with google code you can do much more. Reade here: http://www.google.com/webfonts
below are the list of html "safe" font faces:
arial, arial black, comic sans ms,
courier, courier new, georgia,
helvetica, impact, palatino, times new
roman, trebuchet ms, verdana
Hope this helps
You should never use a element anymore, use CSS instead. Here's a list of the available font-families: http://www.w3.org/Style/Examples/007/fonts
I'd recommend that you use sans-serif instead of Arial.
Its a best of both worlds for mac (causes Helvetica to be displayed) and windows (causes Arial).
Furthermore check out http://www.google.com/webfonts if you want to embed some open-source sexy fonts
As has already been pointed out, you'd be best reconsidering use of the font tag and looking into using CSS (specifically the font-family and related rules, especially font stacking).
As far as what is commonly cited as "web safe" goes, it all depends what fonts are available on your users' computers, as these are the fonts that their browser will work with.
Also look into the CSS #font-face directive, and its usefulness with services like Google webfonts, Typekit, Font Deck and similar. It opens a whole other set of possibilities.
EDIT to remove broken link.
How do I load external font files into an HTML document.
Example:
Make the text "blah blah blah blah blah blah blah" a custom font from a TTF file in the same directory using HTML CSS and/or JAVASCRIPT
Take a look at this A List Apart article. The pertinent CSS is:
#font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }
The above will work in Chrome/Safari/FireFox. As Paul D. Waite pointed out in the comments you can get it to work with IE if you convert the font to the EOT format.
The good news is that this seems to degrade gracefully in older browsers, so as long as you're aware and comfortable with the fact that not all users will see the same font, it's safe to use.
Paul Irish has a way to do this that covers most of the common problems. See his bullet-proof #font-face article:
The final variant, which stops unnecessary data from being downloaded by IE, and works in IE8, Firefox, Opera, Safari, and Chrome looks like this:
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
He also links to a generator that will translate the fonts into all the formats you need.
As others have already specified, this will only work in the latest generation of browsers. Your best bet is to use this in conjunction with something like Cufon, and only load Cufon if the browser doesn't support #font-face.
CSS3 offers a way to do it with the #font-face rule.
http://www.w3.org/TR/css3-webfonts/#the-font-face-rule
http://www.css3.info/preview/web-fonts-with-font-face/
Here is a number of different ways which will work in browsers that don't support the #font-face rule.
Regarding Jay Stevens answer: "The fonts available to use in an HTML file have to be present on the user's machine and accessible from the web browser, so unless you want to distribute the fonts to the user's machine via a separate external process, it can't be done." That's true.
But there is another way using javascript / canvas / flash - very good solution gives cufon: http://cufon.shoqolate.com/generate/ library that generates a very easy to use external fonts methods.
If you want to support more browsers than the CSS3 fancy, you can look at the open source library cufon javascript library
And here is the API, if you want to do more funky stuff.
Major Pro: Allows you to do what you want / need.
Major Con: Disallows text selection in some browsers, so use is appropiate on header texts (but you can use it in all your site if you want)
Microsoft have a proprietary CSS method of including embedded fonts (http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx), but this probably shouldn't be recommended.
I've used sIFR before as this works great - it uses Javascript and Flash to dynamically replace normal text with some Flash containing the same text in the font you want (the font is embedded in a Flash file). This does not affect the markup around the text (it works by using a CSS class), you can still select the text, and if the user doesn't have Flash or has it disabled, it will degrade gracefully to the text in whatever font you specify in CSS (e.g. Arial).
Try this
<style>
#font-face {
font-family: Roboto Bold Condensed;
src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
#font-face {
font-family:Roboto Condensed;
src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}
div1{
font-family:Roboto Bold Condensed;
}
div2{
font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
I did not see any reference to Raphael.js. So I thought I'd include it here. Raphael.js is backwards compatible all the way back to IE5 and a very early Firefox as well as all of the rest of the browsers. It uses SVG when it can and VML when it can not. What you do with it is to draw onto a canvas. Some browsers will even let you select the text that is generated. Raphael.js can be found here:
http://raphaeljs.com/
It can be as simple as creating your paper drawing area, specifying the font, font-weight, size, etc... and then telling it to put your string of text onto the paper. I am not sure if it gets around the licensing issues or not but it is drawing the text so I'm fairly certain it does circumvent the licensing issues. But check with your lawyer to be sure. :-)
As an extra way, you can use Google Fonts CSS API. Try to find your font here.
It's very useful thing. Google Fonts has a big library of free fonts. You can request even single letters for optimization.