I'm trying to use androids roboto font on a website it works fine until I get a german letter in a text then it looks like the font-weight is changed.
Its imported like this:
#font-face {
font-family: 'RobotoLight';
src: url('Roboto-Light-webfont.eot');
src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Light-webfont.woff') format('woff'),
url('Roboto-Light-webfont.ttf') format('truetype'),
url('Roboto-Light-webfont.svg#RobotoLight') format('svg');
font-weight: normal;
font-style: normal;
}
and then it looks like bellow.
Would this be of a faulty font or because of a css setting? Any suggestions of how this could be fixed?
Answer: the font is faulty. If you want to use non-english characters and the Roboto-font dont download the web-prepared one. It seems to be reduced to be quicker to load and is there for missing some characters. Download the original and convert the fonts yourself.
Something is wrong with the font, but without more information (where did you get the font from, what did you do with it?), it is impossible to say what went wrong. But assuming you mean the Roboto font distributed at developer.android.com (which is distinct from the Google font with the same name, by a different designer), just download their font package, unzip it, process it with Fontsquirrel #font-face generator, and use the CSS provided by the generator. I just tested, and German characters appear OK.
The characters that look bolder might be from a normal (weight 400) typeface of the font, or from a different font, presumably because the light typeface does not contain them.
Related
I am currently building a local joomla website that uses both greek and english language and i want to change the font.
I visited fontsquirrel and i downloaded the font "Helsinki" (http://www.fontsquirrel.com/fonts/helsinki) that supports greek language, but when I tried to view the results, only english characters changed.
Then, I tried downloading a webfont kit with the option "no subsetting" and again, only english characters affected.
Lastly, I tried downloading the ttf file and go to generator. I uploaded the font (Helsinki) and I chose expert.
There, I chose greek and english language and I downloaded the new webfont kit.
But when I tried to apply the changes, only english characters were affected again, and greek text disappeared.
What went wrong?
#font-face {
font-family: 'helsinkiregular';
src: url('fonts/helsinki-webfont.eot');
src: url('fonts/helsinki-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/helsinki-webfont.woff2') format('woff2'),
url('fonts/helsinki-webfont.woff') format('woff'),
url('fonts/helsinki-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Running the font through any font tool (TTX, FontForge, etc) shows that it absolutely does not support Greek. Or really anything other than Basic Latin, partially, and a handful of Latin Extended glyphs.
There is a question posed here at work whether if we use a CDN-based font, such as Font Awesome, if the entire font is downloaded right away, or if the glyphs are only fetched if actually used.
I have people who want to create custom "sub-sets" of font awesome to reduce page weight, and I'd like to know if this is really an issue.
yes, it downloads the entire set. But the entire set is incredibly small compared to bitmap images. Since fonts are just vector images
**edit to answer your comment
Does anyone have an idea about the weight of Font Awesome, in K?
It depends on the browser there are 4 different formats for the different browsers.
OTF 62kb
eot 38kb
svg 198kb
ttf 79kb
woff 44kb
It uses in its CSS this:
#font-face {
font-family: 'FontAwesome';
src: url('../../../fonts/fontawesome/fontawesome-webfont.eot?v=4.0.3');
src: url('../../../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../../../fonts/fontawesome/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../../../fonts/fontawesome/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../../../fonts/fontawesome/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
And the browser will pickup on whatever format it understands and download that one. It will not download all of them. It will only download the first file it understands
While file size is not a concern in most Western font sets, it does become cumbersome with Asian font sets which include some 7000 glyphs. Google Noto Sans CJK for example, is a nice looking web font, but weighs in between 1MB and 2MB for each font-weight. Wondering how this is best approached.
I have generated a #font-face with FontSquirrel, and resulted these (tweaked later) rules:
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.eot');
}
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.woff') format('woff'),
local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
font-weight: normal;
font-style: normal;
}
Style is applied in the css file like this:
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-family:'CabinSketchRoBold',Arial,sans-serif !important; }
Everithing works fine in Chrome, even in InternetExplorer, but in newer versions of Firefox, the font doesn't load. It loads in FF 3.6... o_O
I have another font, Ubuntu, loaded from Google via the JavaScript option, and that one loads ok, even on the headings, after changing
font-family:'CabinSketchRoBold','Ubuntu',Arial,sans-serif !important;
What's wrong with the declarations that makes FF ignore my local font?
EDIT: this is not only on localhost, it happens on the live site too. I have looked at other answers and tried them out, but no luck. WOFF was even base64 encoded, same result.
SOLVED: Seems that the .eot being in a separate declaration (again, FontSquirrel generated) was doing the damage. Moving it with the others solved it. Thanks Boris Zbarsky!
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.eot?#') format('eot'),
url('cabinsketchro-boldwebfont.woff') format('woff'),
local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
font-weight: normal;
font-style: normal;
}
Your problem is that you are actually defining two separate faces of the "CabinSketchRoBold" font.
The first face is normal weight and uses .eot file for the font data.
The second face is bold weight and uses one of woff, truetype, svg, whichever is available.
Then you're styling text that's normal weight. So the first face is picked. See http://dev.w3.org/csswg/css3-fonts/#font-style-matching for the spec on this.
In particular, following the steps in that spec, in step 4 we end up a single face: the .eot one. But since the browser can't do anything with that font format, this face has no glyphs so in step 5 the browser moves on to the next family name. The other (bold) face in the "CabinSketchRoBold" family is not considered, per spec.
So the upshot is that you should either list font-weight: bold in both your rules or in neither one. Then the .eot and the other options would all be considered as sources for a single font face, not for different faces in the same family.
It looks like Chrome doesn't actually follow the spec here, unfortunately...
The latest versions of Firefox are able to show the font related errors in the tools->web developer->errors console. for example this is the error I give with a custom font:
Error: downloadable font: table 'GSUB': OpenType layout data discarded
You must have this font type for working in IE,Firefox,Chrome
#font-face
{
font-family: 'BHoma';
src: url('/public/font/BHoma.eot?#')format('eot'),
url('/public/font/BHoma.ttf')format('truetype'),
url('/public/font/BHoma.woff')format('woff'),
url('/public/font/BHoma.svg#BHoma')format('svg');
}
but you first must generate your font from this link
http://www.codeandmore.com/2011/06/font-face-kit-generator/
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}
i am currently building a website which i am using a custom font for. The font is not avaible # google webfonts, so i had to download the font and load it through #fontface.
I used the markup from the examples from the site where i downloaded the font.
Link to the font - http://www.fontsquirrel.com/fonts/Colaborate
heres the css markup
#font-face {
font-family: 'ColaborateRegular';
src: url('ColabReg-webfont.eot');
src: url('ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
url('ColabReg-webfont.woff') format('woff'),
url('ColabReg-webfont.ttf') format('truetype'),
url('ColabReg-webfont.svg#ColaborateRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The font works fine on the webpage , but to get to the problem.
I need to use swedish special characters Å Ä Ö - and they just get super weird on the webpage.
heres a image
http://oi44.tinypic.com/2r4tmo0.jpg
What could possibly be the problem? In the photoshop i've recieved from the designer they all look allright with the font.
Thanks!
The special characters aren't the characters of the font Colaborate, they are from the fallback font I suppose.
You need to make sure the package from fontsquirrel contains those special chars.
I see that your font set doesn't include those special chars and for this the browser uses your default font family. You should pick a set that supports them.