I've been working for a client site and I have problem with rendering of Roboto font.
In Chrome (ver. 43.0.2357.65 m) all the various weights of Roboto looks same.
Here is the example:
Left is Mozilla Firefox, right is Chrome
http://i.stack.imgur.com/dX4Lx.jpg
Do you have any idea what's wrong with it?
thank you
Well, it's such a shame, but I have had old version of Roboto installed on my PC.
Since I deleted, everything works fine again.
I should facepalm myself hard..
I have the same version and it's work.
Try to include font in CSS with this code
#import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);
body {
font-family: 'Roboto', sans-serif;
}
And set the font-weight: 300; for exemple and see if that works.
If you are using Adobe's Creative Cloud and you have Roboto set as a font, you may run into issues where all things in Chrome then get Roboto Bold. I disabled the font from Adobe Fonts and it fixed my issue, but in some Google products like GMAIL, Sans Serif is bolded and you can't turn off the bold. I don't know why and I can't find any good information on how to resolve that.
If you use #fontface evert browser use different font format so the complete css is like this:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
But as suggested using google fonts you should have no problems.
I had a similar issue. I noticed that all periods are square, not circle. Download a fresh copy of Roboto font here and reinstall it on your machine.
I had the same issue, for me what worked was calibrating my monitors and:
Go to chrome://flags/
Accelerated 2D canvas -> Enable
2D canvas -> Enable Reboot Chrome.
In my case, for a Hebrew site, the font-weight was set to 900 and the output was showing differently in Firefox and Chrome browsers even though I followed Google-Font's embedding rules properly:
//For example:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
Solution:
I have just updated the font-weight to 700 instead of 900 and this fixed the issue.
https://stackoverflow.com/a/27383566/11417534 fixed this problem for me.
Just delete the protocol declaration (http:// or https://) from the font request.
Related
i working on the ios optimization of my current WIP template and i have a strange font problem.
as you can see here:
http://www.minddraft.com/anytain/htmltemplates/font-issue.html
the fonts in the topbar / navbar are totally crisp.
All fonts below are blurry. the bar with the add movies button is not transformed or something. the content with the covers is absolute positioned and the covers itself have perspective and 3d transforms.
the special thing is, that this affects only safari for ios. on chrome for android and desktop browsers all looks fine.
i've tried the following stuff to fix it:
increased the font-size and scaled it down
added webkit-font-smoothing
added translateZ(0)
added prespective
added preserve-3d
nothing worked. i have no more ideas how to fix this problem. any ideas?
Edit:
I use the following #font-face rules for my fonts:
#font-face {
font-family: 'Bariol';
src: url('fonts/bariol_light-webfont.eot');
src: url('fonts/bariol_light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/bariol_light-webfont.woff') format('woff'),
url('fonts/bariol_light-webfont.ttf') format('truetype'),
url('fonts/bariol_light-webfont.svg#bariol_lightlight') format('svg');
font-weight: 300;
font-style: normal;
}
Cheers,
Marco
Either consider a different font format, from my experience .woff works very well, I had a similar problem once and for the life of me I can't recall what I did to fix it, consider something like the following:
#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 */
}
If you make sure every browser has its font format set everything should be fine, anything else is just odd.
I'm pretty sure my problem persisted up until one day when some updates rolled in for the various browsers, I remember specifically firefox having issues with the fonts I was using causing flickering and such.
Oke i fixed it!
The problem was a perspective:1500px on the wrapper itself. i have no idea why webkit on ios renders fonts so blurry when i apply a perspective. if anybody knows more about it, please share your knowledge :)
the designer send me some fonts to use on a website. Here is my fonts.css file:
/* Delicious */
/* Delicious Bold */
#font-face{
font-family: 'delicious';
src: url('fonts/delicious-bold-webfont.eot');
src: url('fonts/delicious-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/delicious-bold-webfont.woff') format('woff'),
url('fonts/delicious-bold-webfont.ttf') format('truetype'),
url('fonts/delicious-bold-webfont.svg#webfont') format('svg');
}
But apparently this only work on my Mac but only on Chrome and Safari, does anybody see an error o have some advice to solve this issues, because on a linux or windows this doesn't work no matter if you are using chrome, safari, IE, opera o whatever.
Thanks for your help guys.
UPDATE
Line on the css file:
font-family: 'delicious', Arial, sans-serif;
Use the browser's development tools to see if the file is actually being included.
In Chrome right-click, Inspect Element -> Network. You should see the font-files being included somewhere. My guess is that either the path to the fonts is wrong, or the protocol is blocking access to them in some browsers
I m using one of the Font for my website i.e. "Aparajita". Which is not required to be available in every system through which my site is getting accessed.
My problem is it look's different when this font is installed on the browsing PC and some horrible when the same font is not getting installed.
How should i resolve this issue.
Should i install "Aparajita" Font on my hosting Server or what else...
Thanks in advance..
Make sure you have legal rights to the font.
Make the font available on your web server (i.e. put it in a directory from which it can be served in response to an HTTP request, the same way you would an image or stylesheet).
Reference it in your CSS using #font-face.
See: https://developer.mozilla.org/en-US/docs/CSS/#font-face
Font Squirrel has many free fonts and font-related tools. Google Fonts abstracts the whole process is makes it quite easy.
Now that you (hopefully) know what terms to search for, you can find many examples on SO of using custom fonts.
You can use CSS3 #font-face property for use custom font in your website and with the help of this your font will look same on all computers wheather they have insallted that font or not....
You can write like this :-
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Or Read More About how to use custom fonts for our websites.....
<font face="Your font_family">
Here it is for font style.
<FONT SIZE=7 COLOR=RED>word</FONT></U></B>
In my site i am using specific font with this code:
#font-face {
font-family: 'monotype';
src: url('/static_frontend/monotype.eot'); /* IE9 Compat Modes */
src: url('/static_frontend/monotype.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/static_frontend/monotype.woff') format('woff'), /* Modern Browsers */
url('/static_frontend/monotype.ttf') format('truetype'); /* Safari, Android, iOS */
}
When I open the site with www. the font not loads in firefox. In every other browsers everything is fine. In firefox font works only without www.
If anyone has encountered a similar problem please write.
Thanks in advance!
Consider using Google Fonts. If that's not viable enough for you, I encountered a similar issue a while back. It happened because the fonts were on a separate domain or subdomain than the original files.
Found the reason to be for this was because base URL was always set to without www. and the other style sheet was linked without www. as well, made path relative and it works just fine!
I need to include a font (OpenSymbol) in a html file and the font file is in a local folder (I know the exact absolute path to it). If I use #font-face like this:
#font-face {
font-family: "OpenSymbol";
src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}
It works in Chrome, Opera and Safari, but not in Firefox neither IE9. Other #font-face usage works perfectly fine in all browsers.
Btw, in Chrome, I get a warning:
Resource interpreted as Font but transferred with MIME type application/octet-stream
What can I do to cleanly include a locally stored font which is not installed on the OS?
Edit:
I found out that the listing of different urls seems not to work! Chrome loads the font if I put the [...].ttf url in the first place, but not if it's somewhere else!
2nd Edit:
I got it to work in all browsers except firefox:
#font-face {
font-family: 'OpenSymbol';
src: url('file:<path>/openSymbol.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OpenSymbolEOT';
src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
...
and then
.element {
font-family: OpenType, OpenTypeEOT, [...];
}
Anyway, it does work in IE but not in eclipse, which uses IE's rendering engine... o.O
Btw, firefox has problems because of security issues: See here
You just need one font file in web open font format. Go to http://www.fontconverter.org to convert your OpenSymbol.tff to OpenSymbol.woff. I am a cross-platform developer and i tested this works okay on:
Safari 10.1 and Firefox 52.0.2 on macOS 10.12.4 (iMac)
Internet Explorer 11.0 and Firefox 52.0.1 and Google Chrome 52.0 and Opera 53.0 on Windows 7 (PC)
Safari on iOS 10.3.1 (iPhone)
Chrome 57.0 and Asus Browser 2.0.3 on Android 5.0.2 (Asus tablet)
This goes in the css:
/* Add the decaration on top */
#font-face {
font-family: 'OpenSymbol';
src: url('font/OpenSymbol.woff') format('woff');
}
/* in separate css .elements or even the whole body, edit your font properties */
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..
No need to bother with Embedded OpenType (EOT) fontfiles, because they are only needed for IE9 (2011) and IE10 (2012).
No need to bother with Scalable Vector Graphics (SVG) fonts, because they're no longer needed since iOS 5.0
Already since 2012 Web Open Font Format (WOFF) is fully supported by every known browser. Truetype Fonts (TTF) are used local on iMac and PC, and can be used local on Android and iPhone as well. That's why web developers often make this mistake, using TTF instead of WOFF for a site.
It might be the browser is just not supporting the .ttf file. Consider working with fontsquirrel, it will generate all required files (.ttf, .woff, .svg, .eot) and css for you, and works in all browsers. I use it all the time...
According to a sample font page from Font Squirrel, Both IE 9 and Firefox require font files to be served from the same domain as the page they are loaded into. So with #font-face, your only option is to find the font file(s) you are trying to use and upload them to the site, and then use code similar to the following:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Taken from http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
EDIT: One more thing from the Font Squirrel page, if you are using an IIS server, the file types need to be add to the list of MIME types.