I am using a custom font that I implemented into my website using the #font-face css selector and provided the different formats of the fonts for the different browsers, up to this point firefox, chrome IE11 and opera render the font approximatly the same.
but when it comes to giving a font-weight: 900; Only Chrome succedes in rendering a bold enough font,
firefox and IE rendering is close to what chrome renders at 500 or 600
is there a work around to acheive the same result in the other browsers without having to implement a bolded version of the font in all different formats ???
firefox rendering
chrome rendering
The best way to keep font weights consistent is making sure that font comes with a bold weight font file. If your font files don't come with your desired weight then the Browser & OS will try to manually style the font which results in, as you've seen, different rendering.
Related
I have a website, in which the fonts are appearing good in safari, but broken in Chrome and Firefox. I couldn't find which rule is overriding my font settings. Please help.
This page is live at http://alterknitnewyork.com/drop-off/
In safari, it is taking the settings from uaf.css but in chrome and firefox they are scored-out. I have no idea why it is broken. Even I tried to apply the font inline with !important tag, but no success.
It looks like you have two #font-face declarations for the "same" font. One is in MyFontsWebfontsKit.css which references a font as "Elizabeth-Italic". The other declaration, in uaf.css is referencing a font as "Elizabeth Italic". These are two distinctly different fonts.
Assuming you want the italicized font, just set the font-family to "Elizabeth-Italic" and you should be good to go.
I'd recommend removing any of the CSS files you don't need (particularly #font-face declarations), it will lessen the number of HTTP requests and make the site a bit snappier overall.
I'm working on a website, and I have a problem with displaying font on two subages in webkit browsers on Mac OS X. In all Windows browsers fonts look the same.
In Safari and Chrome on Mac the font on http://clients.cateristic.com/2013/catering/hospitality/vip-catering-fur-mcarthurglen-group/ is bolder than on http://clients.cateristic.com/2013/portfolio/hospitality-catering-texas-usa/ even though the styling of .project-description and .single-container are the same.
Any ideas?
Hmmm... maybe set a particular numeric font weight for the classes?
for example instead of font-weight: normal, set font weight: 400. Perhaps the browsers have different interpretations of font-weights.
http://webdesign.about.com/od/fonts/qt/aa031807.htm
I am using an embedded google font in my HTML for the header of my website. It works fine in all browsers on most computers, but does not work on some macs. I read a solution for this that suggested adding the declaration !important to the line in my CSS where I call the font, but that didn't work. I have two macs at home, mine and my boyfriends. The font works fine on his in all browsers, but on mine it only works in firefox. We are both running mountain lion. Any suggestions??
Here is a link to the site: http://nataliearriolaphotography.com
I tried doing this by the #import method in my CSS as well and it still didn't work.
The page uses the weight 100 typeface of the Lato font family, but the text declared to be in the font has a different font weight: the default weight normal, i.e. 100. The secondary font specified on the page is san-serif, which is a nonexistent font (sans-serif would denote the browser’s default sans serif font). Different browsers may handle this differently depending on the circumstances.
So you should add
font-weight: 100;
to the CSS rule for the element.
I am trying to use the CSS font face property. I've made it chance the font to the right one, however it looks very edgy on the Windows platform. Especially Chrome looks awful.
When using OSX all browsers are just perfect.
How can I avoid these awful looking fonts?
On OSX Chrome:
On Windows Chrome:
The Segoe font is already installed on most Windows PC's. This can cause problems when you are also trying to link it with CSS. Try renaming the font in your CSS so that it has a different name than the built-in Windows font.
Also, Chrome just doesn't render TTF/WOFF fonts very well. You can get around that by prioritizing the SVG font (by putting it higher up in the font list). This will make Chrome select the SVG font (but most other browsers will still use the WOFF font). See here for more information.
[REVISED]
My custom icon font is not rendering in Mobile Safari on iOS 5. I've confirmed that the problem must be with my CSS.
The font works fine on iOS 6 and on desktop versions of Safari, Chrome, Firefox, and IE9 when using the corresponding eot and woff formats generated by http://www.fontsquirrel.com
#font-face
I'm currently using the following simplified #font-face declaration (SASS):
#font-face
font-family: 'Boundless'
src: asset-url('boundless.ttf', font) format('truetype')
font-weight: normal
font-style: normal
The following HTML works (it renders the desired icon character in Mobile Safari on iOS 5.1:
<h1></h1>
However, I see a <?> glyph if I try to render it in the way that Font-Awesome does:
SASS
i.bicon-biology:before
font-family: "Boundless"
content: "\f0000"
HTML
<h1><i class="bicon-biology"></i></h1>
Yet Font-Awesome icons render fine on the site.
Does anyone know what might be causing this issue?
I should also add that I tried all the recommendations made here: #font-face not embedding on mobile Safari (iPhone/iPad) and none worked. This includes adding the smiley-face hack, making sure my font urls are absolute, and trying svg fonts (which shouldn't be neccessary for iOS 5 anyway).
Mobile Safari apparently just doesn't like the utf-8 addresses I was using (/0f0000-/0f001e).
I edited the font to move the characters to the same positions that Font-Awesome uses (/00f000...), and presto, it works!
I also checked whether adding/removing 0's padding the left made a difference, and it works either way. There's just something about the other address range. :\
AGAIN: This is only an issue when the codes are used in pseudo element content. As you see above, (and ) rendered just fine when it was directly in the HTML.