Как встроить собственный шрифт в CSS?

Я недавно пытался внедрить шрифт на свой сайт. Я не заставляю его работать, я смотрел и читал учебники. Я не хочу вставлять шрифт под названием «Ubuntu Light» в формате ttf. Это то, что я пытался:Как встроить собственный шрифт в CSS?

#logBtn{ 
    font-family: 'UbuntuLight'; 
} 
@font-face{ 
font-family: "UbuntuLight"; 
src: url("CSS/Ubuntu-L.ttf"); 
}

И файл в папке: Treeview of project

Я почти новичок в этом, я кодирование HTML и CSS в, может быть, 4 месяцев. Я застрял в этом раньше, и это заставило меня отменить мой проект, потому что я сдался. Но я не хочу снова сдаваться. Поэтому я бы очень признателен за помощь! :)

источник

2016-05-12 Tobias Rasmussen

Я действительно рекомендую использовать https://www.google.com/fonts/. Сюда входит шрифт, который вам в настоящее время нужен, и тысячи других, я не смотрел, но это потому, что вы импортируете шрифт ПОСЛЕ того, как он используется ? - Также попробуйте удалить одиночный апостроф. – ConorReidd

. Вы добавили его в свой проект с помощью генератора webfont, например https://www.fontsquirrel.com/tools/webfont-generator. – drip

Вы можете встроить шрифт легко и быстро, используя этот код:

@font-face { 
    font-family: 'Name'; 
    src: url('Font.ext'); 
    font-weight: 400; 
    font-style: normal; 
}

Где Font.ext должен быть заменен вашим файлом шрифта и его расширением (тип файла), например

src: url ('Ubuntu-L.ttf');

И следующий шрифта веса и стиля шрифта должны быть ссылки на конкретный выбор шрифта.

источник

2016-05-13 13:41:23 snkv

Хорошо, спасибо большое! :) –

Но это не сработает. Не могли бы вы увидеть, что я сделал неправильно? Это код ** **: '#logBtn { font-family:" UbuntuL "; размер шрифта: 30 пикселей; цвет: белый; } @ font-face { font-family: 'UbuntuL'; src: url ('UbuntuL.ttf'); font-weight: 400; font-style: Light; } 'Может быть, легче увидеть здесь: https://i.gyazo.com/f1d365053f57ade7476bb886b1f34b86.png –

Ваша декларация шрифта должна всегда находиться в верхней части вашего CSS-файла, @SynomousArtz – snkv

Путь url(...) относительно таблицы стилей.

Таким образом, потому что ваша таблица стилей находится в папке CSS вам не нужно включать, что в URL:

@font-face{ 
    font-family: "UbuntuLight"; 
    src: url("Ubuntu-L.ttf"); 
}

источник

2016-05-12 19:41:04 Quantastical

Как встроить собственный шрифт в CSS?

ответ

Смежные вопросы