Font Face Not Working for Custom Language Characters

Font Face not working for custom language characters

Turns out Font Squirrel generator was not configured properly when the web font files were being generated.

The following Font Squirrel options must be selected in order for the correct language glyphs to be generated:

Click on the Custom Subsetting radio buton and selected the following options:

Character Encoding: Mac Roman

Character Type: Selected all checkboxes in this section

Language: English, French, etc.

I replaced my old web font files with the newly generated web fonts and the French characters showed up no problem.

@font-face not working

Double period (..) means you go up one folder and then look for the folder behind the slash.
For example:

If your index.html is in the folder html/files and the fonts are in html/fonts, the .. is fine (because you have to go back one folder to go to /fonts). Is your index.html in html and your fonts in html/fonts, then you should use only one period.

Another problem could be that your browser might not support .eot font-files.

Without seeing more of your code (and maybe a link to a live version of your website), I can't really help you further.

Edit: Forget the .eot part, I missed the .ttf file in your css.

Try the following:

@font-face { 
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf); 
}

I cannot use @font-face

You have to escape the @ sign. The @ symbol is reserved for razor syntax.

To escape @ write it twice @@.

@@font-face {
  font-family: 'nlicons';
  src:url('../fonts/nlicons/nlicons.eot');
  src:url('../fonts/nlicons/nlicons.eot?#iefix') format('embedded-opentype'),
    url('../fonts/nlicons/nlicons.woff') format('woff'),
    url('../fonts/nlicons/nlicons.ttf') format('truetype'),
    url('../fonts/nlicons/nlicons.svg#nlicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

How to add a fallback font for a non supported character in font-face?

Actually if I understand your question right you can by using css unicode-range

see @font-face/unicode-range at: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range

and a quick example:

@font-face {
    font-family: Almoni;
    src: url(Almoni.ttf);
    unicode-range: U+0590-05FF;
}
@font-face {
    font-family: CoolOtherLanguageFont;
    src: url(CoolOtherLanguageFont.ttf);
    unicode-range: U+0370-03FF, U+1F00-1FFF;
}
body {
    font-family: Almoni, CoolOtherLanguageFont, Helvetica;
}

Some character not work with fontsquirrel webfont

I have similar problems with fonts š, č, ž in Slovenian language.

I usually download the font (or Kit), go to @font-face Generator, upload the ttf (or other font file) file and choose Expert customisation. In Subsetting choose Custom Subsetting... Custom language support and find Hungarian language. Than see if the Subset Preview has your special characters in it. Read the agreement and download customized font.

This works for me.

Different font-face for different languages

One thing I could think of is to add a class to the html element when the language is set to Lithuanian, and apply a new font when this is the case. I think trying to fallback to specific characters would be a pain.

---

Related Topics