Im working on my website and am trying to replicate a font I was using in Photoshop. The Font name is Trebuchet MS. Im using Dreamweaver CS5.5. I dont think there is a way to use HTML for this, but im pretty sure there is in CSS.
Thanks!
You can use
font-family: Trebuchet MS, ...;
in CSS. This will work only for users who have Trebuchet MS installed, which means pretty much all users with Windows and mostly not others. Others will see the text in some of the fonts you put in place of “...”, or in the browser’s default font.
If you want a cross-browser solution, you need to find a free font (or a font that is licensable for use as a web font) that suits your needs and use it as a web font via #font-face (there are loads of tutorials on this, some of them good).
Related
I want to have a consistent fonts display when user browse my web pages, I'm trying to use font squirrel to convert my fonts into multiple formats but it gives me error somehow...Stated that it is a licensed font.
But I've purchased the font previously, so how do I provide the license for my font in order to let me do the conversion?
depending on where you bought the font you might not have a license to use it on the web.
font web embedding usually requires a special license. (here's an example with different licensing options for Helvetica Neue).
If you want to use custom font on your page I would suggest having a font file with you page (in the same folder/directory). For example:
/folder
page.html
font.ttf
Then using css #font-face feature:
#font-face
{
font-family: font;
src: url(font.ttf);
}
and afterward apply it to any html element
body {
font-family: font;
}
Just trying to extend on Liviu's answer. Helvatica is not a web font. It comes with Mac OS X. So, unless the user has it installed, it won't show. If you are asking if you can embed it or not, the answer is yes, you can embed it. But that is NOT allowed.
If you must use it, go ahead define it as a font family, but also define a fall-back family. Just in case a user doesn't own a mac, they will see the other family font.
Lastly, if you wish to use a web font, maybe you could have a look at Google Web Fonts: https://www.google.com/fonts/ it has many options and it's fairly easy to use. You might even find a font that looks similar to Helvatica or any other fonts you have in mind.
Good Luck!
I'm having an issue with websites using the Helvetica font and Helvetica Neue.
I tried getting some help to fix it but its apparently an issue with my Linux installation.
Since I can't fix it myself, I thought to write either a userstyle (Stylish) or a userscript for my Chrome browser to detect websites that use Helvetica or Helvetica Neue.
If those font are used, then replace them with something else.
How could this be implemented?
If this is for just a few websites, use Stylish, and tune for just those offending parts of the page. For example:
#-moz-document domain("stackoverflow.com"), domain("askubuntu.com") {
body, p, div, textarea {
font-family: comic sans !important;
}
}
If it's for all sites, Stylish or a userscript is not your best bet.
This is because:
For Stylish, it would be a full time job finding and adding the appropriate CSS selectors.
Or, a blanket approach for Stylish, like:
* {
font-family: comic sans !important;
}
would no-doubt bust the layout of some sites.
A userscript could theoretically replace CSS only if it was set to Helvetica, but one of two problems would occur:
Checking style sheets would seem more efficient but your script would be blocked, from reading/writing some sheets, by security restrictions. Although the style sheets you were most interested in would probably be readable (same domain, not in JS created iframe).
Conversely, you could check the computed style of every element, but you'd have to monitor for AJAX changes, and this could get CPU intensive.
For a blanket approach, the smartest thing to do is to fix or reinstall your Linux OS.
At the very least, you should be able to map your system's Helvetica font to something else (I know you can do this on Windows, so Linux probably has a mechanism too).
Might be best to ask a question on Unix and Linux or on Super User for help fixing the system font problem.
i am converting psd to html and font used in psd is moolboran, my tag font-family: MoolBoran;, which is not supported by browsers, how can i overcome this problem? is there any possible solution to as alternative?
Your options are to either save an image with your non-standard font, or use the CSS property font-face, and allow the site visitors to download the font file. For more details of this approach, see CSS 3: Custom Fonts Using #font-face.
Web safe fonts have been a bane to designers for a while, but you can check out Google Web Fonts to see if there's a font that's close (it doesn't look like they support MoolBoran unfortunately)
The only solutions are to
A) use an image rather than live text (which is generally a poor method)
B) See if a web font version of "MoolBoran" is available somewhere. And use the #font-family selector. I looked but can't find anything for it.
C) Change your design.
There is nothing wrong with that tag, it's certainly supported by all browsers.
The font does of course have to be installed on the visitors computer, which is probably where you have your problem.
If you want that exact font, you can make an image out of the text. That is the only sure way to get exactly the look that you want across all browsers.
You should supply fallback fonts in your tag, for example:
font-family: MoolBoran, Geneva, Arial, sans-serif;
Our web designer suggested using Cambria as a font. In looking at various font references online, we couldn't find authoritative sources that listed recent (post 2010) browser support for various fonts.
Which sources do you use to determine how supported a particular font is? I'm guessing there are reports for fonts like there are for browsers, but we haven't found anything reliable yet.
I think you don't need to worry too much about native browser support for fonts. Instead you should consider two things:
Using #font-face
Using a good font stack
Combine the two and you should be safe, no matter what.
For #font-face, you can generate the font and make it cross-browser compatible.
Start by licensing the font from here ( http://new.myfonts.com/search/cambria/ ) or somewhere else.
Then generate the #font-face code with Font Squirrel ( http://www.fontsquirrel.com/fontface/generator ) or another service. The result will be cross browser compatible in nearly all cases.
Finally, add the font to a font stack so that there is a fall back in case something happens with your custom Cambria font. Something like this for whichever rule you are working with: font-family: Cambria, Georgia, Palatino, Times New Roman, serif;
Of course, you could also choose a similar free font through Font Squirrel or use Google's Web Fonts.
More good info here: http://sixrevisions.com/css/font-face-guide/
You won't find Cambria and the other fonts in its family natively installed on computers running anything but Windows Vista and newer, and you'll only have luck on other systems if they have Office 2007/2008 and newer installed.
As long as the font is present on a user's computer, any browser should be able to handle it, even without the need for #font-face embedding. The idea of font embedding is to get a browser to recognize and use a font that isn't installed on a user's system, rather than getting the browser to understand and render the font.
You're not going to find something that works on everything. Try Cambria, Georgia, serif; Georgia's a reasonably close substitute that's very widespread, and the serif default will work anywhere.
Discussion here: http://en.wikipedia.org/wiki/Cambria_%28typeface%29
The browser doesn't have much to say as to the fonts it supports; they are dictated by the fonts present in the underlying OS.
It's hard to find support references for particular fonts. However, #font-face is widely supported and regardless, a good font stack with fail-safe fonts is a must-have.
I was wandering how can I link font-family in css to a font in your folder. Like PHP you can use your font in your folder.
Example Code:
CSS:
font-family: verdana;
This is what I mean:
font-family: foldername/font
Is there a code for that? or I have to use PHP to browse my own font?
#font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
Just found this one on "A List Apart", haven't checked myself but this webbie is one of the most respectful resources for designers online so i guess your best shot is to give it a try.
It is not possible do like:
font-family: foldername/font
Fonts are read by the browser from the client machine from a specific location, you can not change it that way.
Jordan,
This should help you:
Using #font-face
You are misunderstanding this. PHP can use server-side fonts to generate an image. The font itself is never shown to the client, just the rendered results.
To be able to use a non-standard font in the user's browser, you will have to package the font along with the site.
There are various techniques to do this, all with various degrees of browser support. Here's a good article on the various available techniques, their upsides and downsides. Also check out the duplicate link.
Note that only because you paid for a font, this does not mean necessarily that you are allowed to re-distribute it embedded in a web site! Always check your font license.