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.
Related
I choose for my website the following font:
http://fontscore.com/fonts/Helvetica-Neue-LT-Std-35-Thin_22514.html
On a Mac this font looks awesome while on Windows it looks horrible. Here's the screenshots:
I tried to convert the font using a fontgenerator; I also add this stuff:
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
Still the same result. I know that windows use Cleartype and treat fonts in different manner with respect to a Mac but is it possible to solve this?
EDIT:
Here's my font face rule:
#font-face {
font-family: 'Thin';
src: url('fonts/helvetica-neue-lt.eot');
src: url('fonts/helvetica-neue-lt.eot') format('embedded-opentype'),
url('fonts/helvetica-neue-lt.woff') format('woff'),
url('fonts/helvetica-neue-lt.ttf') format('truetype'),
url('fonts/helvetica-neue-lt.svg#Thin') format('svg');
}
HelveticaNeue is a Mac system font, and the exact version that Apple uses is not available on PC (as far as I know). I usually add 'Arial' to the font-family style, and it displays fine on a PC.
I would suggest using http://www.google.com/fonts/
Arimo is a compatible font for helevetica neue
easy to implement and compatible across all platforms
HelveticaNeue is an Apple system font. I don't believe there is a PC equivalent, asside Helvetica, witch is not the same, but a close looking one.
We had this situation too, especialy after trying to work with zurbFondation. We tried to debug, even wrote to mozilla ..
My best solution to your problem : don't use helvetica neue and stop your designers from using them like those who know not much about rendering engines.
Just don't use it. If you really really need explanations about 'why not use it' do like us, spend about 6 hours testing cross-plateform, cross-browsers .. and another 4 hours arguing with technical director and designers.
Yeah, this answer is not much of 'scientific' buy AYE! believe me, it's bad.
https://www.google.ca/#sclient=psy-ab&q=helvetica+neue+pc+firefox+problem
https://www.google.ca/#sclient=psy-ab&q=helvetica+neue+pc+problem
https://www.google.ca/#sclient=psy-ab&q=helvetica+neue+problem
Have a look at this article from typekit: CSS properties that affect type rendering .
Quoted from this article:
When it comes to type rendering on the web, there’s not much web designers can do. The way fonts appear on screen is mostly due to operating systems, browsers, typeface designs, font files, and how those font files are (or are not) augmented with instructions for the most unforgiving rendering scenarios. But in some cases, CSS properties can affect how type looks.
It's from 2011, but it covers some interesting things about font rendering which are still useful.
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
I'm curious if anyone has an idea about how this stuff works behind the scenes. I'm interested if there is a way to host your own fonts and also if those would work for all major browsers out there?
Found this interesting post on Typekit's blog. This was the kind of answer that I was looking for.
Edit: I wrote a web font server which borrows some of the techniques described in the article.
I suggest looking up WOFF (Web Open Font Format). There should be various applications (at least one free web app) available for converting regular desktop fonts to WOFF.
The only real obstacle to embedding any font you want are licensing restrictions, and that is what Typekit was created to solve. They provide a means to legally embed web fonts that they've obtained licensing rights for from type foundries—hence the subscription cost.
You can do as Aillyn suggest if you can find free fonts that don't have such licensing restrictions, or you can acquire WOFF fonts that are licensed specifically for web use, and which are also compressed for faster loading. Alternately, you can convert your TrueType/OpenType fonts into WOFF and use any font you want, regardless of legality.
However, the way Typekit embeds fonts is by embedding them directly in the CSS:
#font-face {
font-family: "bello-pro-1";
src: url(data:font/woff;base64,...=);
font-style: normal;
font-weight: 400;
}
—where ... is the WOFF file encoded in Base64. You can also do this yourself once you've acquired a WOFF font.
There's no innate DRM in WOFF, so I'm not sure what has prompted font foundries to suddenly embrace web fonts through WOFF, but from what I've read from a few font designers, it appears that there might be some fundamental misunderstanding of how web pages work and what the "same-origin" policy actually implies.
I imagine they are just embedding fonts like this:
#font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}
/* THEN use like you would any other font */
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif;
}
http://randsco.com/index.php/2009/07/04/p680
I tested that and it works for IE8, FF, Chrome and Safari on Windows.
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.
is there any standard choice of the font family and font size for a general web site .. or something of that kind which are normally used...
Not really, although you'll get a good feel for what is generally used if you spent some time on the internet.
There is always a problem (when using fonts online) that your user may not have the font. This is why the font-family lets you provide multiple fonts. Here is a helpful list of fonts that exist on Windows and Mac OS. As of CSS3 we have #font-face which lets us use fonts that we provide.
Well, there is no standard for fonts at all, except for the generic fonts defined in CSS.
Helvetica is a font that is available on most systems. Use the generic font sans-serif as fallback. Arial is the Microsoft equivalent of Helvetica.
The size is a little tricker as it can vary somewhat between implementations of a font, but 14px normally gives you the same size as this text.
body { font-family: Arial, Helvetica, sans-serif; font-size 14px; }
Well there is no general guideline on which font to use on a website it is always best to use web friendly fonts which are defined on WikiPedia as
Web-safe fonts are fonts likely to be
present on a wide range of computer
systems, and used by web content
authors to increase the likelihood
that content will be displayed in
their chosen font. If a visitor to a
website does not have the specified
font, their browser will attempt to
select a similar alternative, based on
the author-specified fallback fonts
and generic families.
You will find more here
link text