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.
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.
I've been using font squirrel to generate web fonts for a while. Usually the CSS it gives is like this:
#font-face {
font-family: 'sancoale_slsf_norm_regunormRg';
src: url(sancoaleslabsoft_normregular_macroman/SancoaleSlSfNormRegular-webfont.eot');
src: url(sancoaleslabsoft_normregular_macroman/SancoaleSlSfNormRegular-webfont.eot?#iefix') format('embedded-opentype'),
url(sancoaleslabsoft_normregular_macroman/SancoaleSlSfNormRegular-webfont.woff') format('woff'),
url(sancoaleslabsoft_normregular_macroman/SancoaleSlSfNormRegular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
But playing around with generating the WOFFs as base64 the outputted CSS changes to:
#font-face {
font-family: 'sancoale_slsf_norm_boldnormBd';
src: url('sancoaleslsfnormbold-webfont.eot');
}
#font-face {
font-family: 'sancoale_slsf_norm_boldnormBd';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09 [BLABLABLA] =) format('woff'),
url('sancoaleslsfnormbold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Does anyone know why the #font-face declaration is split? - Just interested really!
Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format.
Data URI is just a URI scheme that provides a way to include data in-line.
Basically, you’re converting the font file into a crazy long string of text that you can paste right in your font-face declaration to replace the font file source link.
The Data URI Scheme is:
data:[<mediatype>][;base64],<data>
The Base 64 source in a #font-face looks like:
src: url(data:application/x-font-woff;charset=utf-8;base64,<your base64 font>) format('woff'),
Font Squirrel's generator provides the .eot file as IE support for Base64 began with version 9 (I think).
I've found this method of font-face to have higher deliverability over Paul Irish's bulletproof method.
Fonts.css
In practice, I throw all my base64 encoded fonts (plus weight variations) inside a fonts.css file. This also includes my icon font - which I use IcoMoon's web app to build and get the base64.
Yeah, base64 adds some bulk and it sure isn't pretty, but throwing them all into a central fonts.css file reduces your requests, prevents FOUC, and seems to do a great job of getting around stupid aggressive firewalls that block font file types as default.
I actually wrote a little post on this a while back.
My guess is that this is a workaround for the differing data URI support among internet explorer versions. IE 6-7 have no support, IE 8 only supports some elements and only up to 32KB, and IE9+ supposedly works without issue. More info on Data URI support can be found over at Wikipedia and caniuse. The 'base64 CSS' option at font squirrel uses data URI encoding.
I'm using a custom icon-font using CSS3's #font-face and in older version of Google Chrome, only the unicodes are showing and are not being replace or rendered in my custom font, which shows the glyphs for those unicodes.
Here is the #font-face syntax that I am using:
#font-face{
font-family:'glyphs';
src:url('../fonts/glyphs.eot');
src:url('../fonts/glyphs.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphs.svg#glyphs') format('svg'),
url('../fonts/glyphs.woff') format('woff'),
url('../fonts/glyphs.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Any idea why the unicodes are showing and not the symbols that are part of the icon-font?
You're possibly running into unicode-range limitations. As described here you can define in a font-face declaration which Unicode characters are covered. It could very well be that older Chrome versions only replaced Latin characters by default. You should be able to fix this by adding this to your font-face declaration:
unicode-range: U+00-FFFF;
Having said that, it could very well be that you're only having a local issue. Check in your Chrome settings, under Advanced Settings, under Web Content click Customize Fonts, then at the bottom check the current setting for Encoding. Changing its value to "Unicode (UTF-8)" could solve the issue as well.
Try switching the orders of the fonts you are loading. Some browsers, even older version of chrome, load svg fonts in weird / incomplete ways.
Try:
#font-face{
font-family:'glyphs';
src:url('../fonts/glyphs.eot');
src:url('../fonts/glyphs.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphs.woff') format('woff'),
url('../fonts/glyphs.ttf') format('truetype');
url('../fonts/glyphs.svg#glyphs') format('svg'),
font-weight: normal;
font-style: normal;
}
I may be going out on a limb here, but is it possible that the document displaying the font either a) declares a character encoding other than UTF-8 / UTF-16 (or isn't explicitly declared) or b) the html document is saved in an encoding other than UTF-8 / UTF-16?
A very common problem causing websites to display characters incorrectly is having a different declared character encoding in the HTML than the encoding used to save the HTML document. Also, the use of characters that are part of either of these encodings can create issues.
You should post the HTML code as well for us to answer better. I'm assuming you are using data-icon attribute in HTML. In that case, you should add this code after your font-face css code.
[data-icon]:before {
font-family: 'glyphs';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
I've had some problems with relative paths, old browsers and font-face declarations in the past: you might want to try with a fixed path (/someFolderInRoot/fonts/glyphs.svg) or a relative path under the css file-path (fonts/glyphs.svg).
Does it all work in a newer version of Chrome and other browsers?
Chrome installs updates automatically for most users, so perhaps you're making the website backwards compatible for a version nobody uses.
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.
I'm using http://www.fontsquirrel.com/fontface/generator to generate my font ready for web. I've set the options to include subsetting of the German language.
In the website I put this: Über WFW Deutschland but when viewed it comes out as Uber WFW Deutschland. Whats weird is that if I view in any IE version it shows correctly. If I switch to any default system font it also displays correctly in any browser.
How can I get my generated font to work correctly?
Update - CSS Code from generator:
#font-face {
font-family: 'PalatinoMedium';
src: url('../fonts/palatinm-webfont.eot');
src: url('../fonts/palatinm-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/palatinm-webfont.woff') format('woff'),
url('../fonts/palatinm-webfont.ttf') format('truetype'),
url('../fonts/palatinm-webfont.svg#PalatinoMedium') format('svg');
font-weight: normal;
font-style: normal;
}
After hours of fannying about I found that the option Apply Hinting - Improve Win rendering when ticked was breaking the font. Un-ticked that and reconverted my font and now the font is displaying as it should.
Although the font doesn't look as nice on Windows...