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.
Related
I use a font called "Basic" and it looks like it's supposed to look like on chrome, but then when I view it on other browsers, although they load the font, it looks different, like bulkier and less rounded.
This font only has one weight and I just can't seem to figure out what causes this issue and how to fix it... Would appreciate any help
#font-face {
font-family: "Basic";
src: url('fonts/basic-regular-webfont.woff2') format('woff2'),
url('fonts/basic-regular-webfont.woff') format('woff'),
url('fonts/Basic-Regular.ttf') format('truetype');
}
That's ordinary, there are drastic differences from browser to browser on how the actual rendered text looks. The important thing here is that no matter how much control you try to exert over text, in the end, you don’t get much. Not to mention most browsers are able to let users re-size and override font settings on the fly.
Check this article:
Font Rendering Differences: Firefox vs. IE vs. Safari
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);
I know there are many questions about different font rendering in different browsers.
But I don't think this is because of rendering.
The website is wikipedia,
When I open this in Chrome it looks like this :
As I open this in other browsers (Opera Firefox or even IE) ,it displays this font :
I wonder why the difference? I don't know much about fonts but I checked the CSS code it just define font-family: sans-serif; So is my chrome have something like default settings which I don't seem to find where to change?
PS: I don't find this difference when browsing other websites using Chrome, So How to avoid this difference when writing CSS?
Because font-family: sans-serif; is set, each browser set's their own standard font. This can ofcourse differ between different browsers.
In chrome, you can set the default fonts at chrome://settings/, under advanced settings.
In safari it is less easy, but I could find this post.
In reaction to your edit, you should always define a font stack in CSS to ensure that the correct font is shown.
A font stack is a stack of fonts, used to define different fonts to be chosen. It looks as follows:
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
This defines Arial as the standard font. If however Arial is not found, Helvetica Neue is chosen. If that font is also not present, Helvetica get's set. In the very unlikely case that even Helvetica isn't present, the standard sans-serif font, set by the browser, is chosen.
For reference, you could check out this website. It has a lot of standard font stacks you can use in your CSS.
Every browser makes it able to chose the fonts you want to be displayed
In chrome you have to go to the settings and click 'Show advanced settings' or something like that to find content display adjustments menu
Fonts compatibility should be differs from various browsers. The way to fix the issue is by using the google fonts or call the font extensions supported for various browsers.
#font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
for more details See this link.
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');
}
}
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