Making a mobile website, for my main website. And all my code shall be W3C validated. I use Verdana as font, and any body knows that MAC/Iphone/Ipads don't have that font. So I thought what if I just overwrite the font. But what if:
One: Will the code be W3C? Answer: YES.
Two: Will it work on all mobile platforms/browsers? Answer: IDK you tell me, new in this world.
Here is the CSS code i want to use:
#font-face
{
font-family: jsverdana;
src :url('fonts/verdana.ttf')
,url('fonts/verdana.eot'); /* IE9 */
}
body{
background-color :#FFFFFF;
background-image :url('/media/common/newbgtest.gif');
font-family :jsverdana,helvetica, sans-serif;
margin :0;
padding :0;
min-width :600px;
}
And yes, i did convert the font "Verdana" This is tested on Iphone 4, and Ipad 1.
Different devices require different font formats, so you should use services like FontSquirrel to generate all of them (and the CSS code for using them), if you use a downloadable font (web font).
On the other hand, Microsoft has copyright on Verdana, so you would need their permission to use it as downloadable font (and even to convert it to other formats).
A more realistic approach is to try and find a suitable free font, perhaps of the fairly nice sans-serif fonts at Google Web Fonts. Or maybe just let each device that hasn’t got Verdana use its own sans-serif font instead (which is what happens when you set font-family: Verdana, sans-serif).
Related
I've created a message board (Within an iframe) which uses Bootstrap's CSS.
Both font size's are at 14px, and everything else is the same, yet IE's font size is way smaller than Chromes.
To get IE the same, I have to bump it up to 24px. Is there any way to forcefully standardize this?
Update
Both their fonts are font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Uploaded the correct pic (Without me changing things UI side).
Notice how IE is using a serif font whereas Chrome is using a sans-serif one?
This means IE didn't recognise your font-family CSS, or you're using a custom font file that IE can't read.
Either way, try looking at the Developer Tools to inspect your element, and look in the CSS rules - if your font is crossed out, that means it doesn't like your font-family rule. Otherwise, it doesn't like the font itself.
I am using Open Sans and Open Sans Light font in my site.
And below is the googleapis font link which I am rendering from google fonts.
I want to use Open Sans Light and Open Sans font in some of the text.
If i choose open sans 300,400,600.
and use font name in the class and add font-weight:300 for light and 400 for regular
it doesn't work for ie7 and 8. It shows the big font on ie 7.
but by using font-weight related to the font styling works fine for other browsers.
Need help to fix this for ie7 and 8.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
With Google fonts you won't be able to solve this problem.
The problem is that IE7/8 understands only
font-weight:700 which it interprets as equivalent of font-weight:bold
and
font-weight:400 which it interprets as equivalent of font-weight:normal.
A solution to this is to serve a separate font file to IE7/8 which contains the desired font face weight - google fonts foes not offer this kind of fallback - but it is very nicely solved with Typekit, which than let's you use this kind of crossbrowser font face rule:
font-family: "proxima-nova-n6", "proxima-nova", sans-serif;
font-weight: 600;
The first declaration - "proxima-nova-n6" - provides a fallback for IE7/8 for a weight of 600.
If you want to solve this without paying for a service, you will have to create separate font files containing different font width - upload them to fontsquirell and generate the complete set of formats needed to cover all the browsers. Take care with licenses - not all font's are free to embed on web.
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 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.
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.