I just started using #font-face
This is on top of my css
#font-face {
font-family: Avenir;
src: url(../fonts/AvenirLTStd-Medium.otf);
}
body{
font-family:"Avenir",Helvetica;
background:#fff url(../images/main_bg.png) repeat-x scroll 0 0;
color:#321244;
}
and i have this below for a menu on joomla
#menu_bottom ul li a {
font-size:12px;
font-weight:600;
letter-spacing:-0.6px;
text-transform:uppercase;
this is on the html file
<li class="item23"><span>Menu Item</span></li>
This works in Firefox, but it is not working correctly on Safari or Chrome, the font is correct but the font-weight is not working, i checked on google-chrome developer tool and the computed font weight is 600.
I have tried using 100 or 900 the results on safari and chrome are the same, the font weight wont change.
Is there something wrong with my font-face declaration on top of my css file?
should i try adding something like this
#font-face {
font-family: Avenir;
src: url(../fonts/AvenirLTStd-Heavy.otf);
font-style: bold;
}
I tried but didnt work.
Should i add another font this are that i have on my font directory
AJensonPro-BoldIt.otf AvenirLTStd-BookOblique.otf
AJensonPro-Bold.otf AvenirLTStd-Book.otf
AJensonPro-It.otf AvenirLTStd-HeavyOblique.otf
AJensonPro-LtIt.otf AvenirLTStd-Heavy.otf
AJensonPro-Lt.otf AvenirLTStd-LightOblique.otf
AJensonPro-Regular.otf AvenirLTStd-Light.otf
AJensonPro-SemiboldIt.otf AvenirLTStd-MediumOblique.otf
AJensonPro-Semibold.otf AvenirLTStd-Medium.otf
AvenirLTStd-BlackOblique.otf AvenirLTStd-Oblique.otf
AvenirLTStd-Black.otf AvenirLTStd-Roman.otf
Or should i try another font format, something that is not otf, in IE seems to be working althought the width is bigger. I still need to fix that.
As explained here, you have to add
font-weight: normal;
font-style: normal;
inside the #font-face declaration and then use the font-weight:600; on your anchor.
Specifying a numerical value for font-weight is something you do at your peril. Different browsers interpret the values differently, and some don't interpret it as anything at all. You are best going with the standard "bold" ... which browsers get closest to matching in some semi-uniform way. Also, if you are using custom typefaces you should be certain your users have them on their systems. Also, some custom fonts don't respond well to the faux "bold" property. They will have a named "bold" face, like Avenir Bold, Avenir Black, Avenir Demibold, Avenir Demibold Condensed, etc., etc., etc.
Also, always include enough fallback fonts, including, at last, the "serif" or "sans-serif" or "monospace" general font specifier.
Better late than never. Hope this helps:
html { -webkit-font-smoothing: antialiased; }
Related
I have css like so:
#font-face {
font-family: 'alegreya';
src:url('fonts/AlegreyaBold.ttf');
font-weight:normal;
font-style: normal;
}
#font-face {
font-family: 'alegreya';
src:url('fonts/AlegreyaBoldItalic.ttf');
font-weight:normal;
font-style: italic, oblique;
}
#font-face {
font-family: 'alegreya';
src:url('fonts/AlegreyaBlack.ttf');
font-weight:bold;
font-style: normal;
}
#font-face {
font-family: 'alegreya';
src:url('fonts/AlegreyaBlackItalic.ttf');
font-weight:bold;
font-style: italic, oblique;
}
And a rule for my class like this:
.font-alegreya {
font-family:alegreya;
}
And finally HTML:
<li class="font-alegreya" data-styles="bold, italic, extrabold">
Alegreya - Some sample words.
</li>
Now, I've read here on metaltoad and other places on SO that using a single font-family is the preferred way to utilize custom fonts and that you have to put bold-italic last.
The Problem is that the font is displayed italic. By using font-weight:normal in the css class, I get normal display weight, but font-style:normal doesn't clear the italics. This makes sense, since under (-webkit) "developer tools" in the "resources" tab, I only see the black-italic font loaded (second in my CSS file). The font is installed on my computer, but I renamed the file on the server.
I've observed this in opera (webkit) and IE11, so it's my code.
Edit: As mentioned in the comments, I had bold and black inverted. That accounts for the bold. But italic is still an issue.
As David Stone's answer on the authoritative answer to #fontface questions states, this spec says that oblique, italic IS valid.
As he stated, FF 3.6 doesn't like the two values. Buried in the comments there are more reports of two-values not working.
On digging into the webkit bug reports, I discovered that the value for font-style as prescribed by the spec changed from CSS2 to CSS3. According the later css3 spec, only one value is allowed for the font-style property, rather than a comma-separated list.
So nowdays, if you pass in a comma-separated list, the rendering engine says "that's not a valid font-style. They must have meant normal." And overrides your previous normal declaration.
tl;dr: If font face is rendering all italic fonts:
font-style: italic, oblique;
should be
font-style: italic;
I've came across a problem with custom font i use for my website.
So i use following CSS for text.
font-family: "Open Sans",Helvetica,Arial;
font-weight:600;
As website is built in my native language, i have to use UTF-8 symbols, that doesn't seems to be included in Open Sans, so they are being shown in Helvetica instead, but the problem is that they have more weight.
Is there any possible solutions to set font-weight parameter to normal, if fallback font is being used?
You could define a new #font-face for each font you want.
#font-face {
font-family: 'mainFont';
src: url(/*Link to Open Sans*/);
font-weight: 600;
}
#font-face {
font-family: 'secondaryFont';
src: local('Helvetica');
font-weight: 400;
}
#font-face {
font-family: 'tertiaryFont';
src: local('Arial');
font-weight: 600;
}
Then you'll end up with font-family: 'mainFont', 'secondaryFont', 'tertiaryFont'; which should get the desired results.
Unfortunately, there is no way to define fallback font specific styling using CSS alone.
As such you may want to attempt to work out the font being used, then apply a style as a result, see here for one method which works out the width resulting from applying a font to an element before 'best guessing' which it is.
That said, it is essentially a hack/workaround.
Otherwise, you could look into implementing a method to identify where the symbols are and then wrap them in styles span tags, again this would be a fairly dirty hack as opposed to a clean solution.
I believe MichaelM's solution won't work. What you can do is specify the font files using the "postcript name" that you can find in various font info sites online.
font-family: "Open Sans",Helvetica-Light;
unfortunately specifying font-weight: 600 might result in undefined behavior. some browser might try to make it bolder, some might just leave it be.,
For some reason the font I'm trying to add won't add itself to my website. I'd rather not do this with an image, so is it possible the font is broken? Would it be possible to fix it with just the otf or ttf?
My code (in case I'm missing something):
#font-face {
font-family: urbanJungle;
src: url('UrbanJungleDEMO.ttf');
}
h1 {
font-family: urbanJungle;
font-size: 100px;
color: #34495e;
}
Additional details: This is in the latest Chrome, other custom fonts work.
In the network console the font is red and it says cancelled.
Live URL: http://codestack.co.uk/website/
The font was from Dafont, no extra processing applied by myself, it's in the same directory as the index page. All the relevant CSS is included.
You should use Font Squirrel font-face generator for this: http://www.fontsquirrel.com/tools/webfont-generator
Different browsers need different font formats, you only provided one. The generator will convert your font to all the formats needed and give you a CSS file too, with no hassles.
You are using only TrueType font, IE support only *.eot fonts. And you are missing a lot informations. It is always better to use font stack instead of using single font, if first font went missing css use immediate next font on the list (called font-stack).
Here is an interesting article about #font-face by Paul Irish : Bulletproof #font-face Syntax
#font-face{
font-family:MyFont;
src:url(../font/MyFont.eot);
src:local('?'),
url(../font/MyFont.woff) format("woff"),
url(../font/MyFont.otf) format("opentype"),
url(../font/MyFont.ttf) format("Truetype"),
url(../font/MyFont.svg#myfont) format("svg");
font-weight: normal;
font-size:normal;
}
body{
font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}
I'm using a webfont that only supports most of the latin characters. However, the website is multilingual, russian is one of the languages. As you probably know, russian consists of cyrillic characters, which are then displayed in the secondary font-family. I found Verdana + font-weight:bold to be a good alternative.
However, font-weight bold needs to be related to Verdana only, so I can't just write it into the normal CSS, as the webfont should not be displayed bold. Here some tries that did not work:
CSS:
#font-face {
font-family: "some Webfont";
src:url('xyz.eot')
}
/* The font-weight won't work here */
#font-face {
font-family: "Verdana-Bld";
src:
local('Verdana');
font-weight:bold;
}
/* Doesn't work in IE9 at all */
#font-face {
font-family: "Verdana-Bld";
src:
local('Verdana Bold');
}
/* Doesn't work in IE9 at all */
#font-face {
font-family: "Verdana-Bld";
src:
local('Verdana Bold');
}
.container {
font-family:"some Webfont", "Verdana-Bld";
}
So font-face is probably not the solution here, Verdana Bold seems to be a good way, however, it's not working when using it in normal CSS like this:
.container {
font-family:"some Webfont", "Verdana Bold";
}
I don't get it, when using #font-face, it finds and renders that font, but not when using as font-family?
Verdana Bold is really just a typeface of the Verdana font family, and it should be used by setting font-family: Verdana; font-weight: bold. In some cases, it is possible to use a typeface as if it were a font family, by declaring its name as the value of font-family, but this is browser-dependent and depends on the font, too; for Verdana Bold, the trick does not appear to work. The more complicated trick of using #font-face works for some browsers but not all, as you have seen; this even depends on the font name you use (e.g., the “full font name” Verdana Bold vs. the PostScript font name Verdana-Bold).
So a different approach is needed: try and find a font that covers all the characters needed. E.g., at Google web fonts, you can set “Script” to “Cyrillic” to find fonts that support Russian letters. Such fonts generally support Latin letters, too.
So The font-weight in font-face doesn't set the font-weight but is kind of a filter for browsers to decide if it is the right font to use. So when the browser looks which font to display it will choose the font-face where you set font-weight: bold just if your current text is bold and will take the other one in any other situation.
I think that it is actually possible to make one font bold and the other one regular just if you can call this in font-face directly. (so if you could have something like local('Verdana Bold'). Then just get rid of font-face:bold and it should work fine.
I am using Google Web Font's PT-sans
font-family: 'PT Sans',Arial,serif;
but it looks different in Chrome and Firefox
Is there anything that I need to add so that it looks same in all browsers?
For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.
For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:
#font-face {
font-family: 'source_sans_proregular';
src: url('sourcesanspro-regular-webfont.eot');
src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
url('sourcesanspro-regular-webfont.woff') format('woff'),
url('sourcesanspro-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:
function setBrowserClasses() {
if (true == $.browser.mozilla) {
$('body').addClass('firefox');
}
}
Then in my CSS, I can say
body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:
body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
There are a few fixes. But usually it can be fixed with:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Sometimes it can be due to font-weight. If you are using a custom font with #font-face make sure your font-weight syntax is correct. In #font-face the idea of the font-weight/font-style properties are to keep your font-family name across different #font-face declarations while using different font-weight or font-style so those values work properly in CSS (and load your custom font -- not "fake bold").
I've seen -webkit-text-stroke: 0.2px; mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.
css reset may fix the problem, I am not sure .
http://yuilibrary.com/yui/docs/cssreset/
I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother.
There is nothing you can do about it. good luck
To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.
i found this to be working great :
-webkit-text-stroke: 0.7px;
or
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
experiment with the "0,7" value to adjust to your needs.
The lines are added where you define the bodys font.
here is an example:
body {
font-size: 100%;
background-color: #FFF;
font-family: 'Source Sans Pro', sans-serif;
margin: 0;
font-weight: lighter;
-webkit-text-stroke: 0.7px;
As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues.
To fix this, you can do the following:
First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:
https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js
Now that you can target a Browser/OS, create the following 'new' font:
#font-face {
font-family: 'Custom PT Sans';
src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
font-weight: normal;
font-style: normal;
}
The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly.
Get the URL here http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext
You may also rename your #font-face custom font-family alias.
Create a simple CSS rule to use that font targeting Browser/OS or both:
.mac .navigation a {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Or
.mac.webkit p {
font-family: "Custom PT Sans", "PT Sans", sans-serif;
}
Done. Just apply the font-family rule wherever you need to.
Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).
I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.
Set "Accelerated 2D Canvas" to "Disabled"
(In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)
Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.
On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.
The new fix (for me) appears to be:
Settings -> Show advanced settings... -> System
UNCHECK "Use hardware acceleration when available"
https://superuser.com/questions/821092/chromes-fonts-look-off
The issue might be more what we don't set in our CSS than what we do set.
In my case, FF is showing text in the default Times New Roman, while Chrome uses Montserrat as expected.
This happens to be because in Chrome I set Montserrat as the default, while FF has no default.
So, I think that some browser differences are rooted in the browser's configuration rather than in my CSS.