I'm not sure what else to blame... But I've tried everything, including reconverting original tff to web fonts using squirrel converter.
The font in question is this: http://www.fonts2u.com/bolnisi.font
The description it says: Unicode BMP only whatever this means :)
On the demo, I see that text in html had been entered in latin characters.
When I use Georgian utf letters: ქართული. This font never applies!
Example: http://mac.idev.ge:800/breakmedia/ Look at the header, only numbers are transformed into this font. Rest is normal serif.
CSS:
#font-face {
font-family: 'bolnisiregular';
src: url('font/bolnisi-webfont.eot');
src: url('font/bolnisi-webfont.eot?#iefix') format('embedded-opentype'),
url('font/bolnisi-webfont.woff') format('woff'),
url('font/bolnisi-webfont.ttf') format('truetype'),
url('font/bolnisi-webfont.svg#bolnisiregular') format('svg');
font-weight: normal;
font-style: normal;
}
html *
{
font-family: 'bolnisiregular' !important;
}
What is happening here? any ideas?
That's a typical "hack" font. As you can see on the font page you link to, the glyphs are not at the character code they're supposed to belong to. The glyph at the code point for "i" is "ი". That's not the correct glyph for "i". The glyph for "i" is supposed look like "i". The glyph "ი" belongs at code point U+10D8, the code point for the Georgian letter "IN".
Such font hacks are/were used before the code points for that language became officially ratified in the Unicode standard, and/or for software in that language which does not (yet) support Unicode. I.e., sometime in the dark ages there existed no official encoding for the Georgian language, yet people in Georgia wanted to see Georgian glyphs on their screens. So arbitrary ASCII code points were overloaded with Georgian glyphs. Strictly speaking, that font is broken.
This specific font has Latin letters only which you can see in Character map section below the example text on fonts2u.com.
Related
Is there any way in CSS to specify a different font to be used just for Chinese characters?
Specifically, I have some user inputted text which can contain either standard English, Han characters or a mix of both. I'd like to use Myriad Pro for non-Han characters, and Kaiti Std for all Han characters.
I realize this can be done by running over the content with JavaScript, adding span tags around the Chinese characters and then applying styles to them, but is there any more standard/efficient way?
I don't care about old browsers, although it should work in the latest version of Chrome/Firefox/Safari/IE.
You can specify a unicode-range for font-faces so that that each font only applies to a subset of unicode characters.
http://dev.w3.org/csswg/css-fonts/#composite-fonts
A very basic implementation would look something like (adjust for font files and formats as needed):
#font-face {
font-family: 'MyFonts';
src: local('Kaiti Std');
unicode-range: U+4E00-9FFF;
}
#font-face {
font-family: 'MyFonts';
src: local('Myriad Pro');
}
body {
font-family: 'MyFonts', sans-serif;
}
Some interesting browser quirks/work-arounds documented at http://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/
As title already says: font-face does not work with my Chinese fonts.
I have downloaded some Chinese fonts, but for some reason these are not recognized by my css.
This is the css I use:
#font-face
{
font-family: 'chinese';
src: url('chinese.ttf') format('truetype');
}
html {
height:100%;
font-family:"chinese";
}
Now, if I change the url to a 'normal' font, it works; also for downloaded fonts (I tested it with Din). Unfortunately the 'normal' fonts do not support Chinese, so the characters will stay unaffected.
Both fonts are located in the same folder as the css file, so the url is not the problem. Also all character sets are correct (or else I couldn't see the default Chinese at all).
Is there maybe some extra thing I have to do for Chinese? Or what is it?
When declaring a Chinese font family, it’s typically a good idea to type out the romanization of the font (for example, “SimHei”) and declare the Chinese characters as a separate font in the same declaration. What this does is help reference the font file regardless of weather it’s been stored in the local system under its Chinese or western name – you’re covering all your bases here.
Example :
font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
For Your Reference : Good Rules for Using Chinese fonts in CSS
I think this may help you to resolve your problem.
refer this post,
I think you need the same answer :)
http://stackoverflow.com/questions/15756093/is-the-css-right/15756147#15756147
convert fonts to "woff"
that will solve your purpose..
Sample :
#font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 700;
src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/droidserif/v3/QQt14e8dY39u-eYBZmppwTqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}
you need to modify font name and url :)
As far as I know, there's a service based in Taiwan can help you use different Chinese font.
http://en.justfont.com/fonts
Due to the large size of Chinese font file, it's recommended to use Google cloud service. But there's no appropriate Chinese font on it. So you can give it a try on this justfont web font service.
Select any font you want for specific font weight. Then it'll be added to your project.
Choose your selector like .notosans, #notosans or h2
Click "JS" button and get your code for your setting
Add it befor <body>
Insert your class or id.
Give it a try and get your beautiful Chinese font. :)
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 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.
First I know there are similar questions to mine,
and I do tried Font Squirrel Generator for tons of Arabic fonts, all of them render text in English correctly but none of them worked with Arabic letters!!
so is there a desktop tool (since all web apps is not working) than can convert Arabic fonts without breaking them ??
I have purchased an Arabic font, and I just want to convert it so I can use it on the web, and I did not like the idea to pay subscriptions to some fancy websites like fonts.com each month to provide me with these fonts !
and in case you're wondering about my CSS here you go:
/* CSS */
#font-face {
font-family: 'GESSTVBold';
src: url('arabic-3/ge_ss_tv_bold-webfont.eot');
src: url('arabic-3/ge_ss_tv_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('arabic-3/ge_ss_tv_bold-webfont.woff') format('woff'),
url('arabic-3/ge_ss_tv_bold-webfont.ttf') format('truetype'),
url('arabic-3/ge_ss_tv_bold-webfont.svg#GESSTVBold') format('svg');
font-weight: normal;
font-style: normal;
}
.ar {
font-family:"GESSTVBold";
}
<!-- HTML -->
<h1 class="ar">مرحبا بالخط العربي</h1>
Thanks
Hope it's not too late, try font2web .. worked for me perfectly, just save your html file with codepage-1256 encoding.
Switch the Font Squirell to Expert mode.
Then on Subsetting: choose either No subsetting or Custom subsetting
Sorted! :)
EDIT:
On custom subsetting you either need to tick your desired subset or type it in the input fields.
I tried to use the font Squirrel but there is no Arabic unicode support, and I tried to set the Unicode ranges: 0600-06FF,0FB50-0FDFF,0FE70- 0FEFE but the same problem in cutting arabic letters is still existed.
finally I tried the site http://everythingfonts.com/otf-to-woff and the result was great
I don't have any Arabic font on hand so you'll have to try it:
upload your font
choose expert
on the list of options you have subsetting - this cuts off unwanted characters to save bandwidth - try "no subsetting" (unless you know unicode ranges, and you want to specify them)
let me know if it worked.
I encountered some issues while converting Persian or Arabic Fonts. For instance, words became separated. So الیاس converted to الیاس.
In order to compress Persian font appropriately, I have used transfonter website, and my configurations were as follows:
Family support checked
local rule unchecked
Fix vertical metrics unchecked
Base64 encode unchecked
Formats: WOFF and WOFF2
Hinting: Strip Hinting
Subset: Arabic
Unicode Ranges: U+0600-06FF
Font display: swap
The mentioned website could successfully convert 1.1 MB TTF to 166.1 KB WOFF2.