Нигде кроме chrome desktop не работают шрифты

259
19 августа 2017, 00:04

Дико бомбит. Разрабатываю сайт на yii2. Возникла необходимость подключить сторонние шрифты. Сгенерировал через fontsquirrel web font generator веб шрифты. Положил в папку web/fonts. Создал файл web/css/fonts.css примерно следующего содержания:

@font-face {
font-family: 'open_sansregular';
src: url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
url('../fonts/opensans-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

AppAsset выглядит так:

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/font-awesome.min.css',
        'css/fonts.css',
        'css/site.css',
        'css/login.css',
    ];
    public $js = [
        'js/jquery.bootstrap-autohidingnavbar.min.js'
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapPluginAsset',
    ];
}

ну и в site.css выглядит примерно так:

body {
    background-color: #FAFAFA;
    font-family: 'open_sansregular', sans-serif;
}

Результата ноль. Самое интересное, что я могу вообще файл fonts.css не подключать - десктопный хром сам каким-то боком их найдет. Остальные браузеры (включая мобильный хром) шрифты не подтягивают. в исходном коде страницы все подключается в нужном порядке. Я вообще не понимаю что тут к чему. Кэш чистил миллионы раз..

UPD: font awesom работает прекрасно..

Answer 1

Все-таки поборол проблему.
1. Сменил конвертатор на transfonter.org т.к. предыдущий почему-то сломал русский шрифт. 2. Необходимо ручками отредактировать тот файл css, что нам оставил конвертатор, а именно: данный конвератор все шрифты называет одинаково, поэтому правим ручками каждый font-family ну и правим url шрифтов (и вот тут самое веселое).

В чем веселье? Если вы настроили свой сервер на то, чтобы он смотрел по умолчанию в папку web, то у вас должно быть все хорошо. У меня не было такой возможности и я решил эту проблему через .htaccess (который скопипастил на популярном сайте). И видимо есть какие то проблемы там, раз человеческий url до шрифтов выглядит так: '../fonts/font-name.blabla', а мой (рабочий) так: '../web/fonts/font-name.blabla'

Ну вот и все, день убил на это..

READ ALSO
Em, размеры отступов и элементов

Em, размеры отступов и элементов

Дан макет шириной 2880px, верстаю на мониторе шириной 1024pxНе совсем понимаю, как переносить размеры с макета в верстку

226
gulp.watch не видит новые файлы

gulp.watch не видит новые файлы

Есть вот такой таскНо когда создаю новые файлы в блоке ===> вот блоки gulp

204
Visual Studio Express 2012 for Web [требует правки]

Visual Studio Express 2012 for Web [требует правки]

как создать первый сайт? Первый сайт! Как запустить?

196