If given the following code from the CSS:
font-family:SpecialBold;
font-weight:bold;
Firefox double bolds (it bolds already bold type). This does not seem to be an issue in Safari, Opera or Chrome. I can't just remove font-weight:bold; because if something happens to the hosted typeface, the default typefaces won't bold.
The issue I'm facing is trying to use at #font-face with non- web-safe typography. The typeface I'm using has a specific bold font. In Chrome etc., the following won't work:
font-family:Special;
font-weight:bold;
beceause the Special typeface can only be bold if the SpecialBold typeace is being used.
How do I make it so that Firefox doesn't double-bold already bold fonts? Or, vice-versa, can I make it so that Chrome etc. uses a bold typeface when font-weight:bold is used?
You can use this rule to tell the browser that SpecialBold is already bold so that synthetic bolding does not need to be applied:
#font-face {
font-family: SpecialBold;
font-weight: bold;
src: local(SpecialBold);
}
Might need to be modified depending on exactly what your font faces are called, of course.
#font-face {
font-family: Special;
font-style:normal;
font-weight: normal;
src: local(Special);
}
#font-face {
font-family: Special;
font-weight: bold;
font-style:normal;
src: local(SpecialBold);
}
So you can use the same font-family name and change the weight with font-weight instead of using two different font names. Be sure to add the URL of the font on your site in case your users don't have it!
Related
I have a font face on my site and the text comes out very rough on window chrome only.
I have done the following tweaks:
- made SVG first, tried adding a text shadow, tried antialiased font smoothing.
#font-face {
font-family:'grl';
src: url('../fonts/gotham-rounded-light_21020.eot');
src: url('../fonts/gotham-rounded-light_21020.eot?iefix') format('eot'), url('../fonts/gotham-rounded-light_21020.svg#webfontZam02nTh') format('svg'), url('../fonts/gotham-rounded-light_21020.woff') format('woff'), url('../fonts/gotham-rounded-light_21020.ttf') format('truetype');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
font-smooth: always;
}
here's the url
http://thunder.beresponsive.net/meet-the-kids.html
There is no way currently to fix this.
In some cases, adding CSS text-shadow helps. If it doesn't help, then you quite simply need to use a different font.
Google is aware of this issue, but they don't really care.
I think that you need to specify the font-weight in a number value, i.e. font-weight:200 rather than just "normal".
I have generated font-face files for the font "formata" using fontsquirrel. On my Mac the font looks good in both Chrome and Safari (which seems logic since both use Webkit). It renders fine on Android (Chrome) and the iPad (Safari) as well.
In Windows, however, the font renders really weird. Some letters look like they have a padding-bottom of 1px. Some letters also seem like they are one pixel to small on the height.
I have tried to turn of ClearType, but it still is the same. The browser doesn't seem to matter.
Below is screenshot of how i looks like:
Try adjusting the font size. Some custom fonts on Windows don't work well at specific font sizes. Experiment with a few different sizes.
An example that works for me:
#font-face {
font-family: 'PaddingtonSCPlainSmallCapsRom';
src: url('/assets/fonts/paddingtonsc-webfont.eot'); /* IE9 Compat Modes */
src: url('/assets/fonts/paddingtonsc-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/assets/fonts/paddingtonsc-webfont.woff') format('woff'), /* Modern Browsers */
url('/assets/fonts/paddingtonsc-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('/assets/fonts/paddingtonsc-webfont.svg#webfontCykG2Qou') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
/* font-variant: normal; don't include this since webkit will ignore the whole rule: https://bugs.webkit.org/show_bug.cgi?id=25000 */
}
body {
font: normal 75%/1.5em PaddingtonSCPlainSmallCapsRom, Arial, sans-serif;
}
I was wondering if there is a way to apply a text gradient in Firefox? I can get it to work in Chrome and Safari and the code goes like:
h1 {
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
text-transform: uppercase;
font: bold 4em "Lucida Grande", Lucida, Verdana, sans-serif;
}
But there doesn't seem to be anything out there for Mozilla.
Unfortunately, I think only WebKit-based browsers implement the text-fill-color property. As far as I'm aware, there is no workaround for Mozilla yet.
FireFox does now appear to support the webkit parameters, aliasing -webkit-background-clip as background-clip (webkit doesn't alias it, hence the most compatible way at present appears to be to use -webkit-backgroup-clip as both FF and WK understand it)
I have implemented a font in css with #font-face, and its looking way fatter when loaded in Safari. Does anybody know what can cause this?
#font-face {
font-family: 'SerifaBold';
src: url('/css/serifbol-webfont.eot');
src: url('/css/serifbol-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/serifbol-webfont.woff') format('woff'),
url('/css/serifbol-webfont.ttf') format('truetype'),
url('/css/serifbol-webfont.svg#SerifaBold') format('svg');
font-weight: 100;
font-style: normal;
}
Your font-face rule is telling the browser that this is an ultralight font (the font-weight: 100 part). Then you're presumably asking the browser to use this font for text that has normal weight (font-weight: 400) or is bold (font-weight: 700). The browser sees that it's got an ultralight font (because you told it so) and needs a normal font, and it does what's called "synthetic bolding": artificially making the letters bolder by drawing them several times with a slight offset.
There is no standard for synthetic bold, and the default behaviors of browsers differ.
If you're trying to use this font for bold text, and it's already a bold face, you should say so in your font-face rule, using the font-weight descriptor.
When using web typefaces with "font variations" including different weights and/or italics included in the font family, always apply "font-style: normal" & font-weight: 400; (or font-weight:normal) to each style declaration. Make sure to explicitly declare each font-family differently for each variation:
EG: I'm using Helvatica Neue from fonts.com
strong, b {
font-family:'HelveticaNeueW01-75Bold', 'Arial Black', Arial, sans-serif;
font-weight: 400;
}
em, i {
font-family: 'HelveticaNeueW01-56It', Arial, sans-serif;
font-style: normal;
}
Firefox will "help out" your fonts by faux-bolding & faux-italicizing your nice #font-face type making them really ugly and ruining all the hard work the designer did in creating the fonts.
This applies to all sources of fonts including typekit, google, fonts.com and locally hosted fonts.
I've found the same thing happens. Its almost as if its an entire weight above what it should be. Maybe try with the non-bold version of the font as a starting point?
The same problem on my client's website had driven me crazy, but I finally found the problem. When you call 'SerifaBold' in any of your CSS class, make sure that you also put font-weight: normal;
That finally solved the problem for me.
I am using CKEditor on a webpage.
Quite impressive but I have few very annoying issues I hope you can help me overtake.
1) When the editor is created by Javascript the default font size (12px, I guess) is too small for my7 needs. I would like the font size to be 18px as the user starts typing on a new document.
2) I can change the font size of a block of text by selecting the block of text and then using the combo for the font size. What I can't do is set the combo for the font size (i.e. to 30px) and then type at that size. I think I can do the latter on Microsoft word, for example.
Thanks,
Dan
Pretty easy guys,
open 'ckeditor/content.css', edit this part :
.cke_editable
{
font-size: 21px;
line-height: 1.6em;
font-family:'me_quran' //example font
}
If you are using the default styles, then you must change it at:
Providers\HtmlEditorProviders\Fck\FCKeditor\editor\css\fck_editorarea.css
Just change the style:
body, td
{
font-family: Arial, Verdana, Sans-Serif;
font-size: 12px;
}
Does thi help?
Source