Not all characters in entypo font in Chrome v32 (32.0.1700.76 m) on Windows 8.1 x64 render correctly. In previous versions it was fine. Please see the character map yourself. http://www.entypo.com/characters/
It also doesn't display correctly in 34.0.1809.0 canary. Do you know what might be causing this issue? Is it just me or is it every chrome user?
So after giving up on searching, I decided to try some things on my own.
And I got the font to work using this fix below, in order to render fonts properly in Google Chrome.
The fix:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'entypo';
src: url('path to entypo.svg#entypo') format('svg');
}
}
Related
I have simple static page and I want to import a font. But the font displays very strange on Windows with Google Chrome browser. This font displays properly in other operating systems and browsers.
I imported font by using #font-face like this:
#font-face {
font-family: NoyhGeometric;
src: url("../fonts/Typesketchbook - Noyh Geometric Regular.ttf") format("truetype"),
url("../fonts/Typesketchbook - NoyhGeometric-Regular.otf") format("opentype");
}
I use Google Chrome browser in both images.
On Ubuntu (displays properly):
On Windows (displays strange):
Try adding font smoothing property in you css
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Ref: https://davidwalsh.name/font-smoothing
Most of the browsers support woff/woff2 format for fonts.
Go to SquirrelFonts to convert one font format with all the others. The website also provides a pre-made CSS for your convenience.
You should add a .woff or woff2 format to fix your problem.
The issue could be related to "Clear Type" not be "enabled" and Chrome on Windows apparently needs it to better render fonts. This does not resolve the issue as it cannot be controlled through css and javascript.
Try this page in Chrome on Windows: https://fonts.google.com/specimen/Old+Standard+TT
Observer the font not rendering.
Then try going to Start -> Settings -> Type in "Adjust ClearType text" and in the window that opens up check "Turn on Clear Type".
Then restart Chrome, navigate to the same page and observe that the font issue is resolved.
I am using the following font-face rule:
#font-face {
font-family: aiCustomFont;
src: url('../fonts/myriadpro-regular.otf') format('opentype'),
url('../fonts/myriad pro regular.ttf') format('truetype');
}
This works exactly as expected for Safari, Chrome, and Firefox. It does not work at all for IE11 and Edge. I am not seeing any errors logging to the console or anywhere else. I have found many articles on font issues in IE but most of them are several years old.
Do I still need different font formats outside of TTF/OTF for the font to display in IE11/Edge?
If anyone stumbles across this post, I ended up just using a more web-friendly font.
Make sure your #font-face rules are NOT contained in media queries. #font-face rules contained in media queries do not work in IE, Edge, but work in every other modern browser I tested on.
Good Morning,
Today my Google chrome browser updated to 42 (42.0.2311.90), I have noticed alot of things going wrong with the site I'm working on, text will go through divs, padding being ignored.
The interesting thing is if you inspect the element and untick anything and tick it back again it starts working fine. No issues in any other browser or previous version of chrome (colleague still has 41). If you refresh the page a number of times the site appears correctly. If I delete the #font-face, the site works correctly.
It would appear that chrome seems to have either changed the way it draws/renders the external font or, it loads this last after drawing all the other elements.
Does anyone know any possible fixes or smooth way to use #font-face to make it (new version) chrome friendly?
#font-face {
font-family: 'MyFontFile';
src: url("../css/fonts/MyFontFile.eot") format("embedded-opentype"),
url("../css/fonts/MyFontFile.ttf") format("truetype"),
url("../css/fonts/MyFontFile.svg") format("svg"),
url("../css/fonts/MyFontFile.woff") format("woff");
font-style: normal;
font-weight: normal;
}
In order to fix this, I had to force the browser to redraw. Putting the following jquery in, this forces the browser to redraw.
$('body').hide().show(0);
When using Google Web Fonts on Chrome under windows 7, the fonts seem to render incorrectly, while on a Mac OSX (on Chrome, Safari and Firefox) it looks fine. Is there a way to prevent this via CSS or HTML?
The site introducing this behavior can be found here (it might take a while until it loads).
Here's a snapshot showing this:
Alright so this has to do with the way Chrome renders fonts in windows. There is a tool you can use called MacType which changes the rendering engine that windows uses to render fonts.
You can download it here: https://code.google.com/p/mactype/
From everything that i have researched, with google web fonts on windows there currently does not exist a way to fix this issue.
Its simply by design how it works.
You can follow the issue on Chromiums Google Code site..
https://code.google.com/p/chromium/issues/detail?id=137692
heres a snip from the above link that goes in to more detail
As I understand it: the main problem is the fact that Chrome continues
to use the old Windows GDI for rendering fonts, and it looks poor. All
other modern browsers (except Opera) have switched to using
DirectWrite on Windows, resulting in much better font rendering,
leaving Chrome lagging.
If you look back at older versions of IE and Firefox you'll see their
font rendering a few years ago looked exactly the same as Chrome's
does today on Windows. People just didn't notice as much back then as
nobody was using web fonts; when you're using Arial, Verdana etc they
look OK because those fonts have been carefully designed and hinted to
work well with the GDI engine. Most web fonts have not.
for developers, one work around is to put SVG first, doubt this is proper though
-before--------------
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
-after--------------
#font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I found some solution here and it works for me
Have added a temporary fix with the following code...
$('body')
.delay(500)
.queue(
function(next){
$(this).css('padding-right', '1px');
}
);
Can't seem to get my font working in firefox, seems to work fine in IE, chrome and Safari
<style type="text/css">
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.eot") /* EOT file for IE */
}
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.TTF") /* TTF file for CSS3 browsers */
}
</style>
This is the website here, http://www.brightonorient.com - the front page text Brighton Orient should be Monotype corsiva.
Thanks for any help
I typically use Font Squirrel for my #font-face needs and have never had an issue. Check this link to see if the trouble shooting tips provide any help. If it is any consolation, in Firefox on my machine I can see the font load just fine and render properly. Throwing FireBug on it shows the font loaded properly as well. Not sure why you're not seeing it work unless your Firefox is not up-to-date.
Technically, it works for me on WinXP SP3 with Fx 6.0.2 but not with Fx 11.0
Though, on the legal side (IANAL), it seems you don't have the rights to use Monotype Corsiva with #font-face: only Monotype does. See http://www.fonts.com/findfonts/detail.htm?productid=172339 and their service http://webfonts.fonts.com for maybe a solution.
Using it on your computer and distributing it to every visitor via your server are often two very different licences!
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
go to this link http://www.fontsquirrel.com/fontface/generator
upload your font
then download all files have different font formats which is supported for different browsers
and use in your project. now it will work accurately in all browsers