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.
Related
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.
In this site I am currently coding Im using webfonts that are stored on my server.
Every browser displays them just fine but not chrome.
Chrome uses Times New Roman instead.
After checking the developer tools on chrome I found that they fonts ARE being requested from the server and retreived successfully.
For some reason, Chrome wont use them.
I did notice that if I install the fonts on my computer (Using Windows, BTW), the suddenly work on chrome aswell.
Here's my font-face decleration:
#font-face {
font-family: 'BNLunch';
src: url('BN_Lunch.eot');
src: url('BN_Lunch.eot?#iefix') format('embedded-opentype'),
url('BN_Lunch.woff') format('woff'),
url('BN_Lunch.ttf') format('truetype'),
url('BN_Lunch.svg#BNLunchregular') format('svg');
font-weight: normal;
font-style: normal;
}
Any insights?
EDIT:
I forgot to mention that this particular CSS works with other fonts.
Only this particular font and BNMadregot are giving me trouble.
Could it be that it is because the English letters of this font are blank?
I have a similar CSS code here that works fine on every browser, even Chrome.
#font-face {
font-family: "standard 07_58";
src: url("../fonts/standard_07_58/stan0758.eot?") format("eot"),
url("../fonts/standard_07_58/stan0758.woff") format("woff"),
url("../fonts/standard_07_58/stan0758.ttf") format("truetype"),
url("../fonts/standard_07_58/stan0758.svg#Standard0758") format("svg");
font-weight: normal;
font-style: normal;
}
There are some differences from your CSS, so try to follow this pattern and see what happens.
The font is broken (as FontSquirrel told you). Don’t use it. I downloaded BN Lunch from the site you mentioned and processed it with font-face-generator.com, and test .html page it generated does not show characters in that font (and yes, I tried common digits and Hebrew letters, too) on Chrome or on Firefox, only on IE (tested on Win 7). Chrome dev tools shows that Chrome gets the font files and does not signal errors, so apparently the internal tables of the font are broken (e.g., giving wrong information about character coverage). The site that distributes it looks suspiciously like one of the many illegal font distribution sites; e.g., authors or copyright holders of fonts are not mentioned.
So, get another 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.
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...