I have an asp.net page with an asp.net menu.
I defined the font in the menu items to be Myriad Pro.
In IE and Firefox it appears normally, but in Safari the menu items appear blank.
when I changed the font type to another font it worked fine.
so is there a way to make the Myriad Pro font appear on Safari.
thanks
As Rup mentioned, Myriad Pro is not a ubiquitously defined Mac font. However, if you have a copy of the .otf or .eot font files, you can make the font available to all CSS3 compliant browsers and supply a backup font for display should the browser not support CSS3. This would be the syntax for doing such:
#font-face {
font-family: "CustomMyriadPro";
src: url("path/to/myriadpro/font.otf") format("opentype");
}
h2 {
font-family: "CustomMyriadPro", Helvetica, Georgia;
}
Make sure your CSS specifies Myriad Pro in quotes, i.e.
font-family: "Myriad Pro", sans-serif;
Secondly, be aware that a font will only appear if it's installed on the end user's machine (unless you're using #font-face), so you always need to define some fall-back fonts, e.g.
font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
This problem is happening with multiple installed fonts on my Mac since the upgrade to 5.1 and then to Lion. I think something is broken with the upgrade. Other browsers are fine. It is affecting other fonts as well. I had to disable the font-family CSS in the Inspector in order to get this editor to include readable text because Consolas is affected as well.
The problem is not with fallback or specification in CSS. The problem is with Safari and specific fonts. It does not fallback past the problematic font but continues using it, replacing all characters with the capital A in a square; so fallback is of no help.
Discussion and possible explanation here: https://discussions.apple.com/thread/3191532?start=0&tstart=0
According to the codestyle.org font survey, most Macs don't have Myriad Pro installed. (Nor Windows for that matter.) You should pick similar fallback fonts for all of Mac, Windows and Linux then specify a list of these fonts in your style.
If you specifically need Myriad Pro then you could use images, or embed the font using sIFR (maybe not for menus though) or through #font-face font-embedding (thanks Olly!) instead.
Check out the Typekit webfont-embedding service, they have Myriad in their library http://typekit.com/fonts/myriad-pro
Related
I have a script which converts HTML to PDF. On Windows, it runs just fine.
But when I run the script on Ubuntu, the Arial and Courier fonts do not work correctly.
I presume this is because those fonts don't come with Ubuntu by default. That's fine, it's not a big deal.
I'm just wondering what I should change the following to, such that it will still work on Windows and use a font that is close to Arial and Courier respectively on Ubuntu?
font-family: "Arial";
font-family: courier;
Thanks
For the Arial-esque font use
font-family: Arial, sans-serif;
and for the Courier-esque font use
font-family: Courier, monospace;
These rules basically mean: take the first one if available, otherwise the next one, otherwise repeat until the end. It should work in normal CSS (not sure about your particular implementation, though).
sans-serif and monospace are browser or system dependent values for fonts that have been specified as those font classes (e. g. “DejaVu Sans” and “Ubuntu Mono”).
One way is to use Web Safe fonts. Here's a list of Web Safe fonts you can use:
CSS Web Safe Fonts
Another way can be to use a font from your web directory or fonts available on the web from services like Google Fonts,etc.
Here's its usage:
#font-face {
font-family: fontName;
src: url('/font/xyz.woff');
}
Check here for reference on font face rules.
Check this for getting started with Google Fonts.
Check this page for the Font Stack, showing the compatibility of fonts with different OS.
I have two website hosted on different server, there are elements that i have set the same font-family as 'TheSans', I am sure they both are not overwritten, the 'theSans' is the real and final value in css, but the font of these 2 pages just look differently with same browser. I checked on my pc and found that I don't have this 'theSans' font installed, so what actually happened there?
if the browser does not find the font, what font it will use? why the behavior is different in same browser.
If a browser doesn't have the font, it will fall back to the other options specified in the css font-familyrule. If no addition options are specified it will just use its default. eg. below it will use Helvetica if installed, if not it will use arial, if no arial it will just pick what every sans-serif font it has
font-family: Helvetica, arial , san-serif;
Link about font-family
Now that being said, wouldn't it be nice to give the browser the font if it doesn't have it? And that is where the #font-face CSS rule comes in
related question here
About #font-face
I'm using a custom font in a page I'm developing, Droid Sans, and at certain font sizes, the bottom is cut off, but only in Opera and webkit browsers.
It's easy to reproduce on Google's own webfonts page looking for Droid Sans and showing the whole alphabet at 18px: http://www.google.com/webfonts
It's especially clear for the lower case g.
Is there some css trick / hack I can use to increase the line height / show the whole character or am I really limited to only certain sizes of the font?
line-height and padding for example don't change anything and 20px font-size works fine and at the moment I am using Windows 7.
Edit: By the way, I am aware of a similar question here but as the accepted answer is changing the font size and the rest of the answers do not apply, it is of not much use to me.
Edit 2: An example that at least for now shows the problem (left hand column, under the slideshow, Il Cerca Viaggi).
Edit 3: The problem seems to be limited to Windows although I'm not sure which versions.
Edit 4: I have added a screenshot from Google Webfonts to show that the problem is not specific to the site I'm developing.
Although it is not the solution I am looking for, I have found a possible solution that might work for others:
In my original style-sheet I have specified the font as follows:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
font-weight: normal;
font-style: normal;
}
This is causing webkit browsers to use the woff file / format.
Changing the order of the font specifications and removing the hash-tag after the svg specification (why is that there anyway?), causes webkit browsers to use the svg file / format:
#font-face {
font-family: 'DroidSans';
src: url('droid-sans/DroidSans-webfont.eot');
src: local('☺'),
url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('droid-sans/DroidSans-webfont.svg') format('svg'),
url('droid-sans/DroidSans-webfont.woff') format('woff'),
url('droid-sans/DroidSans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This solves the problem, all characters are displayed correctly.
However, at least in Windows 7 64bit, the svg font is not as sharp as the woff font, it's kind of blurry so I will not be using this solution and am hoping for a better one.
To a similar question, one answer suggested that, while this appears to be a Windows font rendering issue specifically, hosting svg, eot and otf versions of a TrueType font (TTF) containing the font, which was not optimized for the web, had fixed the problem for its provider. If possible, get a clean, un-optimized version of the DroidSans font and export the web fonts yourself.
EDIT: Sorry all, I was out for the holiday and didn't have access to SO. Since I've been back, I've done a little research into exactly what's causing this problem on Windows machines...
It appears that the issue lies with the way the OpenType format is rendered on Windows machines. The issue with truncated descenders seems to transcend software type to affect multiple Windows programs attempting to render OpenType. Currently, you have the Embedded OpenType format (EOT) version of the font listed first in your CSS document under #font-face. Since Chrome and Opera both recognize this format, they'll disregard the subsequent source declarations and use EOT to display the font. Unfortunately, there doesn't seem to be a quick fix that you could apply to an OpenType font itself to force the software rendering it to allow adequate line-spacing for the lowest of its descenders on Windows machines...
However, you can be choosy about which fonts you feed to your viewers' browsers. Personally, I would recommend placing the SVG version first in your CSS, and for browsers that don't recognize this format, suggest TrueType (TTF) second, then WOFF, then EOT for browsers that don't support any of the aforementioned (some older versions of IE appear to support OpenType exculsively). If the SVG rendering isn't much to your liking, try TrueType first instead.
Alternatively, although I'm no longer really that confident that it will help, you can download a TTF of DroidSans at FontSquirrel and use a software package like Typograf to export web fonts (EOT, WOFF, SVG). Try rearranging the sources in your CSS as outlined above first, though.
ANOTHER EDIT: My erroneous use of TIFF instead of TTF has been redacted to avoid confusion in the future. Apologies for the mix-up, guys...
I am not sure but try to add this for padding to work
display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;
Set the line height to normal, it is a firefox bug and use the line height in %
I think this might do the trick
It all boils down to the font itself.
Look here
http://jsfiddle.net/DdMej/2/
The first row uses Drod Sans by Google fonts.
The second row uses the font you have on your site.
edit 1
Screenshot
http://imageshack.us/photo/my-images/811/screeniy.png/
I too was seeing my Google Font 'Lato' cut off at the bottom portion of the rendered text. In my case, I needed to serve the font files locally instead of using Google Fonts. To do this I:
Converted the font from .ttf to webfont files with Font2Web
Served the font files locally as static file assets from the localhost
Included fonts in my css with the bulletproof #font-face implementation
This eliminated my cut off rendered text issue.
Screenshot: http://i.imgur.com/QVBGx.png
It is pretty evident that my site renders different on Chrome and FF7 on my Win7 machine
I am using this:
h1, h2 {font-family: "Lucida Grande", "Helvetica Neue", Arial; }
Does anybody can point me how can I even these diffs? I don't want fonts with different 'feelings' on each browser.
The font, Lucida Grande is installed in my Windows machine
EDIT:
font-weight: normal !important
doesn't work either
It looks like the two browsers are rendering it with a different weight.
I can think of two possibilities, though I don't know if either are correct.
You requested a bold font, but that font is not available in bold. One browser is just showing the regular, non-bold variant unchanged, whereas the other has processed it to look bold.
You requested a particular weight of font, say "bold" or "600" but the installed fonts do not precisely match that weighting. One browser is substituting an "extra-bold" variant of font, and the other a "regular-bold", or something of this nature.
If either of these is correct you could play around with the font-weight CSS property to try and alter it. But then that may affect substitution of whichever font is chosen in the case that it is viewed on a system with no Lucida Grande font at all.
Fonts will always render slightly different from one browser to another, but that was a bit more difference than usual. Probably because the headers have font-weight: bold; as default, and the font doesn't have a bold variation so the browsers create the bold style from the regular weight in different ways.
Anyway, you might want to use more common fonts. On my Windows 7 machine there is neither Lucida Grande nor Helvetica Neue, so it would render using Arial. Still, I have the additional fonts that come with both MS Office and Photoshop, so I have a lot more fonts installed than you can expect from a standard system.
Also, you should always specify a generic font as the last resort, in this case sans serif, otherwise it would render using the default font if none of the fonts are installed, which is something like Times Roman which has a completely different look. Perhaps also adding Helvetica, which is the closest equivalent of Arial on non-Windows systems.
I'm developing a website for someone but they want (insist) that the title be in a non-standard font. (The customer is always right.) I have the TrueType (.ttf) font but how do I bundle this with the website so that it uses it?
I tried putting it in the Images folder and tried to access it with the style sheet:
font-family:URL(Images/Arial_Rounded_MT_Bold.ttf)
But that didn't work. How do I include a non-standard font in a way which will render?
In case it's useful, this is an ASP.NET 2.0 site.
There is currently no standard way to do this. You could use #font-face, but it's not supported in all browsers. As Lance mentioned, this is a great place to find a support reference for the major browsers.
There is an effort to standardize this type of thing. The Web Open Font Format (WOFF) is such an effort. It looks like this may even be adopted by the major browsers in the future. We will have to wait and see.
For now, the best you can do is to reference your font like you normally would, but add a default (standard) font after that.
font-family: "Arial Rounded MT Bold", "Times New Roman", Serif
You have two options:
Create an image instead of using text
Use sifr to convert your text to the .ttf font
You have lots of options, none of them perfect. Smashing Magazine has a great article about rich fonts - most of them involve flash / image replacement.
http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/
Convert your TrueType font into an Embedded OpenType font (it's easy!) so that you have two font files:
Arial_Rounded_MT_Bold.ttf
Arial_Rounded_MT_Bold.eot
Then make your CSS look like this:
#font-face {
font-family: 'Arial Rounded Bold';
src: url('Arial_Rounded_MT_Bold.eot');
}
#font-face {
font-family: 'Arial Rounded Bold';
src: url('Arial_Rounded_MT_Bold.ttf') format('truetype');
}
h1.title {
font-family: 'Arial Rounded Bold', serif;
}
Thanks to Internet Explorer, the EOT specification needs to be first, in a separate #font-face block and without the format attribute. More info here.
Enjoy!
There is a fair amount of activity on the subject of distributing fonts along with websites, but it's generally in the experimental stage, and won't work for the vast majority of browsers in use. In a few years you may be able to do this, but for the moment you would have to use an image or sIFR.