Fonts in Russian won't work in Hype

Elements Typography
1

So, once again I am asking the same question, and I am sorry for that, but I face the same problem and cannot solve it, I am trying to import Fonts in Russian and they appear in English fine, but they don’t show in Russian.

This is the CSS:


@font-face {
    font-family: 'a_russdecorregular';
    src: url('${resourcesFolderName}/a_russdecor-webfont.eot');
    src: url('${resourcesFolderName}/a_russdecor-webfont.eot?#iefix') format('embedded-opentype'),
         url('${resourcesFolderName}/a_russdecor-webfont.woff2') format('woff2'),
         url('${resourcesFolderName}/a_russdecor-webfont.woff') format('woff'),
         url('${resourcesFolderName}/a_russdecor-webfont.ttf') format('truetype'),
         url('${resourcesFolderName}/a_russdecor-webfont.svg#a_russdecorregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
This is the Font itself: a_RussDecor.ttf.zip (28.7 KB) This is the Converted file from https://www.fontsquirrel.com/tools/webfont-generator webfontkit-20160404-101438.zip (112.2 KB)>

I import the converted file, type in the Custom CSS and then I see that the Font works fine with English and it doesn’t work with Russian, what am I doing wrong?

2

Pribet Dimitry,
guess I figure it out.
Under Expert mode in FontSquirrel I checked under Character encoding “Mac Roman” and “Cyrilic”.

Screen Shot 2016-04-05 at 09.48.29.png715×477 38.8 KB

What I wonder is that at Hype stage only numbers are correct shown. In Hype Preview it looks right.

ARuss_cyrilic.zip (174.0 KB)

Olof

1 Like
3

Ok, here a newer example. @font-face method is sometimes picky with " and '.
Now its working as exepted in Hype.

ARuss_cyrilicV2.zip (174.1 KB)

2 Likes
4

Thank you, Olof! so it was not about Hype, it was just my carelessness…

5

One more thing, Olof, do you see the result in Preview? as I tried the way you suggested and it worked, but when I see the Preview in any browser the font won’t appear…

6

Yes. I tested in ff, Safari and Chrome. I will try it later again.

1 Like
7

So tested again. see screenshots. Everything is fine…

Safari
Firefox
Chrome

2 Likes
8

I will try to change ’ for " in the CSS file, as you suggested, this may help…

1 Like
9

Olof, once again, it was just a simple mistake: missed the necessary ${resourcesFolderName}/ clause, of course, with that prefix everything works fine, thank you for your help!

1 Like
10

Hello!
I have the same problem like Dmitriy.
I repeated all your recommendations but not happened. Pleeeeeeease, help me too.

9080.ttf.zip (32,2 КБ)

eer.hype.zip (76,1 КБ)

11

Pribet Alexey,

here you go.

  1. Convert the .ttf font via Webfont generator into a web font
    (see my suggestions above for cyrillic fonts)

  2. Paste generated web fonts into the resource folder of your project

  3. Go to Add more fonts in the Font Inspector and choose “Own CSS…”

  4. Paste in this stylesheet:

    @font-face { font-family: 'aa_bebas_neueregular'; src: url('${resourcesFolderName}/9080-webfont.woff2') format('woff2'), url('${resourcesFolderName}/9080-webfont.woff') format('woff'), url('${resourcesFolderName}/9080-webfont.svg#aa_bebas_neueregular') format('svg'); font-weight: normal; font-style: normal; 
             }

Give font this name:
aa_bebas_neueregular

See my example.
Paka
Olof

eerv2.hype.zip (105.7 KB)

1 Like
12

Privet, Olof! :slight_smile:
I try to win this problem but unsuccessfully
Russian font does not work in iOS and other computers. :frowning:
You can see result -> http://mastersofwit.ru/

Can you see this version?
Im losing hope to solve it… ((
test2.hype.zip (96,7 КБ)

scrnsht 2017-04-21 в 11.52.08.jpg1402×961 168 KB

13

I tested other computers. Neither russian, nor english font does not work.

IMG_21042017_120851_0.png1600×900 131 KB

14

I woooooon it! ))))

For other russian users…
Инструкция для таких же чайников, как я…

Итак, не надо загружать шрифт в Hype.

  1. Сделайте конвертацию в форматы eot, woff и пр.
  2. Всё это залейте на сервер в папку.
  3. Создайте новый кастомный шрифт в Hype.
  4. Напишите следующий код в окне CSS с указанием пути на вашем серере.

Вот образец:

@font-face { font-family: "Bebas"; src: url("http://путь_к_вашей_папке_на_сервере/9080.eot"); src: url("http://путь_к_вашей_папке_на_сервере/9080.eot?#iefix")format("embedded-opentype"), url("http://путь_к_вашей_папке_на_сервере/9080.woff") format("woff"), url("http://путь_к_вашей_папке_на_сервере/9080.ttf") format("truetype"); font-style: normal; font-weight: normal; }

Ещё один важный момент!
Если используете CMS uCoz, то экспортированную в HTML5 папку переименовывайте. Всегда надо удалять часть названия “.hyperesources”. Это правило обязательно и в коде CSS, который иногда вставляется в .

Удачи!

Speacial thanks for Olof and Dmitriy!!!

2 Likes