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.
Related
I've downloaded Google's "Noto Color Emoji" font, but can't get it to work. I have no problems with fonts like "Noto Sans Regular". But with the "Noto Color Emoji" font I get the following errors in Firefox (on Windows 10):
downloadable font: no supported glyph shapes table(s) present (font-family: "NotoColorEmoji" style:normal weight:normal stretch:normal src index:0)
downloadable font: rejected by sanitizer (font-family: "NotoColorEmoji" style:normal weight:normal stretch:normal src index:0)
It's also not working with Chrome, Internet Explorer and Edge on Windows 10 or Firefox on Ubuntu Linux.
This is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#font-face {
font-family: 'NotoColorEmoji';
src: url('NotoColorEmoji.ttf') format('truetype');
}
</style>
</head>
<body>
<span style="font-family: 'NotoColorEmoji'">Emojis: 😀😬😁😂😃😄😅😆😇😉😊🙂</span>
</body>
What am I doing wrong? Are Emoji fonts used in a different way?
Color fonts are coming but you will need to either:
Implement all color formats in one font (4 in total!) -> I don't know if somebody did it but the font would be huge, and it looks really complicated and not recommended.
Make one font for each format and load it conditionally. -> Not recommended as some formats are bitmap based and not vectors & fonts can be huge (+20Mo).
Wait for the OpenType SVG format support on all platforms.
Do it in javascript like
Twemoji "A simple library that provides standard Unicode emoji
support across all platforms."
EmojiOne "EmojiOne™ is the
open emoji standard."
The latest solution looks the best one for now for a web usage!
Color fonts are quite new with several competing standards which are still evolving and being implemented in common text libs (Opentype 1.8 has just been released with another color twist).
They are unlikely to work today except in the very latest preview browsers, and even then the level of support is likely to vary and depend on the underlying system, since browsers do use the system text libs (with various levels of overrides).
Older software will just not recognize the Opentype extensions added to make those fonts possible.
Lastly, Noto Color Emoji is pretty much a prototype, it is likely early versions are not quite conformant to what has been standardised later, and even if they are, the way the color font standards are used is still likely to evolve as font producers and font consumers gain maturity on the subject.
We are currently working on an open source Emoji library called OpenMoji.
At the moment, we got an .ttf font working which you can simply embed in your website
Download the font from here. 💾
Embed the font with:
#font-face {
font-family: 'OpenMoji';
src: URL('OpenMoji-Color.SVG.ttf') format('truetype');
}
Enjoy! 🥳 If there's any question, please let us know.
Note: Currently supports Firefox and Illustrator.
I use font-family:'Segoe UI Emoji'
Works on Chrome, Firefox, IE11, Mac Safari, and mobile Safari.
Mostly all emojis work, including ones that don't have any colors on normal fonts, such as the mountain, speech bubble, paintbrush.
Does not work on Android :(
I am using google webfonts and have come accross an issue with jagged and choppy font rendering in FF and chrome (IE11 renders them better).
Example can be found here: http://jsfiddle.net/PNYfR/
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Exo:300,400,700&subset=latin">
<p style="font-family: 'Exo', serif; font-weight: 400; font-style:normal; font-size:31px; color:white; background-color: #0085B2; line-heigth:1.42857; padding:100px">
Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897
</p>
I've read related questions, but any of them don't offer simple solutions for quick projects:
Google webfonts render choppy in Chrome on Windows
Well rendered webfont solution
Google webfonts and windows xp
To complicate a bit more, our designer is using Mac, which renders fonts correctly.
Questions:
Is there a list of google webfonts which render OK?
Or is there a quick step by step solution on how to get fonts render correctly?
And last, is there an alternative free webfont provider, which serves fonts OK?
I've found that downloading the fonts I want to use, converting them to .svg using font squirrel (web application, google it) and hosting them on the web server seems to solve the issue. In the code, place the .svg font link above the others and Chrome will/should grab that first.
These are the defaults for font smoothing (with google fonts too) I use that seem to do the trick. Hope this helps
*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow:none;
text-rendering: optimizeLegibility;
}
Known issue for years (first mentions from 2010). Developers promissed to introduce fix maybe this year. Problem (as I understand) is with enabling directwrite (for for font smoothing) within sandbox.
More here
http://www.reddit.com/r/web_design/comments/23cuif/yet_another_chrome_webfont_aliasing_post_why_is/cgvs5j2
or here: https://code.google.com/p/chromium/issues/detail?id=331115
Edit: Using SVG font can help for someone, but SVG is too blured for me (compared with antialiased woff in Firefox).
Specifying the font-weight to 400 fixed the issue completely for me. I think it is intially 700, at least for h2 and h1...
h2 {
font-family: 'Lobster', cursive;
font-size: 23px;
color:#fff;
font-weight: 400;
}
Firefox still wins, but it is not jagged anymore
Just go reset all flags in Chrome. Type in chrome://flags in the URL address bar and click on the Reset All Flags to default button. That should be on the right hand side of the settings page. It worked for me. If it does not for you, you may try enabling the Aero visual settings of your computer (only if disabled) then reset the flags. If resolved, you may then switch off the aero visuals.
To access the aero visual settings in Win7, go to My Computer properties > Advanced system settings > System Properties > Advanced tab > Performance (Settings). From there, toggle the current setting back to 'Adjust for best appearance (it should check all boxes under it). After resetting all flags and the fonts are back to normal, you may choose to toggle it back to Adjust for best performance. That essentially unchecks all visual options.
Thanks,
Dong
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).
Can I use "Arial Rounded MT Bold" with css ?
font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
Nothing Changed when I put :
font-family:Arial, Helvetica, sans-serif;
Google Fonts has Nunito, by Vernon Adams:
http://www.google.com/webfonts/family?family=Nunito
It's nice and rounded; sort of reminds me of what they're using on Glitch.
It's hard to know without more information from the OP but I've seen these same symptoms caused by the hardware acceleration feature in Firefox. It's been know to cause several problems with font rendering. One I've observed is failing to render a non-standard font (such as "Arial MT Rounded Bold") despite it being present on the client machine.
For example, this page...
<html>
<head>
<style type="text/css">
body { font-family: "Arial Rounded MT Bold"; font-size: 30px; }
</style>
</head>
<body>
This can be really annoying.
</body>
</html>
When viewed in IE, Chrome or FF with hardware acceleration turned off the font appears correctly, like this...
But when viewed in FF with hardware acceleration enabled the browser fails to "find" the specified font so it defaults to another, like this...
There have been issues with this "feature" of FF since version 4.
Probably the best solution is to either use a different (standard) font or (as Kent suggests) find a similar web font that will work in all modern browsers. Alternatively, like many font issues, the problem can be mitigated by supplying a list of font families to use as fall-backs.
I've seen an alternative Google Font suggested here from back in 2011 which is a pretty good match but there are some thin parts to the font which aren't the same as the Arial Rounded MT Bold.
For people still looking for an alternative I think this one is a better match; its called Varela Round by Joe Prince:
Varela Round
I would also set it in font-weight: bold; for a more accurate match.
To use custom fonts with good cross browser compatibility, take a look at FontSquirrel. They will generate the correct CSS to get custom fonts working cross browser. Take a look around their site for Rounded MT Bold or whatever else you want :-) Also, if you want more fonts, take a look at http://www.fontex.org/
Google Fonts is also a possibility. There are a lot of different fonts but I don't know whether there's exactly Arial Rounded MT Bold.
You can use only fonts which are installed at the clients computer!! So just mentioning them in the css font-family doesn't work if the font is not installed. For this, Google Fonts and others bring the functionality... so everytime you use a font that is not "Times", "Arial" or "Verdana", which are installed on nearly every computer, you should think about an alternative to raw css
There's a good chance that — if nothing changed (on your local browser's rendering of the webpage) when you changed the font stack — that you don't actually have Arial MT Rounded Bold installed on your computer. One way to test this is to use Firebug, to 'inspect element' for the headline (or whatever the font is applied to), and to edit the font-family listing in the right-hand Firebug pane. (Usually, I just find the named font and add a space into the name of it, which "breaks" the call to the proper font, and the browser then moves on to the next font in the stack.)
Other options include using Google's web-font Nunito (as Kent Brewster recommended a few minutes ago), or setting up a font-face font on your own server, providing one of the rounded fonts (RockoFLF Bold, FF Din Rounded, Nunito, and Arial MT Rounded Bold are all options). (Technically, per Kent's comment, Glitch is using RockoFLF, with Arial MT Rounded Bold as the second font in the stack. At least, that's what they were doing a few months ago when I last looked at their code. ... Oh ... just checked again, and they've dropped the Arial MT Rounded Bold out of the stack. They're calling RockoFLF with an embedded font-face.)
Anyway, as Kent Brewster noted, I think your best bet is to use Google Web Fonts' 'Nunito', if you aren't sure that it'll be on your users' computers (or even your own).
It may not appear because of system compatibility - you can check out Arial Rounded MT Bold on CSS Font Stack for compatibility. There's a 59.53% on Windows and 95.14% on Mac. https://www.cssfontstack.com/Arial-Rounded-MT-Bold
Its worth noting that Linux doesn't come with Arial by default so one should not rely on a font being present on a users computer. Instead they should download the files (license permitting), host them on their site and link to them using #font-face.
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.