Шрифты, не появляющиеся в курятник, загруженные в Bluehost

Éloïse Turgeon спросил: 13 июня 2018 в 10:59 в: html

Недавно я загрузил свой код в bluhost, чтобы создать свой портфолио. Однако, пока шрифты появлялись на моем компьютере, они не отображаются, когда я загружаю веб-сайт (через хост-хост).

Вот мой CSS-код. Является ли проблема с помощью CSS или bluehost?

@font-face {
    font-family: playfair-italic;
    src: url(fonts/playfair-display/PlayfairDisplay-Italic.otf);   
}
@font-face {
    font-family: playfair-regular;
        src: url(fonts/playfair-display/PlayfairDisplay-Regular.otf);
}

@font-face {
    font-family: playfair-sc;
        src: url(fonts/playfair-display/PlayfairDisplaySC-Regular.otf);
}

@font-face { 
font-family: opensans-regular;
    src: url(fonts/open-sans/OpenSans-Regular.ttf);
}

@font-face { 
font-family: opensans-semibolditalic;
    src: url(fonts/open-sans/OpenSans-SemiboldItalic.ttf);
}

@font-face { 
font-family: opensans-semibold;
    src: url(fonts/open-sans/OpenSans-Semibold.ttf);
}

2 ответа

Salmen Bejaoui ответил: 13 июня 2018 в 11:09

Попробуйте добавить './' перед каждым URL-адресом, чтобы преобразовать их в относительные пути.

@font-face {
    font-family: playfair-italic;
    src: url(./fonts/playfair-display/PlayfairDisplay-Italic.otf);   
}
@font-face {
    font-family: playfair-regular;
        src: url(./fonts/playfair-display/PlayfairDisplay-Regular.otf);
}

@font-face {
    font-family: playfair-sc;
        src: url(./fonts/playfair-display/PlayfairDisplaySC-Regular.otf);
}

@font-face { 
font-family: opensans-regular;
    src: url(./fonts/open-sans/OpenSans-Regular.ttf);
}

@font-face { 
font-family: opensans-semibolditalic;
    src: url(./fonts/open-sans/OpenSans-SemiboldItalic.ttf);
}

@font-face { 
font-family: opensans-semibold;
    src: url(./fonts/open-sans/OpenSans-Semibold.ttf);
}
Mike Abeln ответил: 13 июня 2018 в 11:14

Так как это оба Google Fonts, вы, вероятно, захотите использовать тег script, чтобы вытащить файлы шрифтов из CDN от Google, вместо того, чтобы встраивать их в проект и обслуживать их с вашего сайта.

В <head> вашего HTML-файла добавьте это:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i|Playfair+Display+SC|Playfair+Display:400,400i" rel="stylesheet">

И чтобы использовать шрифты в ваших CSS-файлах, используйте следующие правила:

font-family: 'Open Sans', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Playfair Display SC', serif;//font-weight and font-style will define the rest
font-weight: 400; // This is the regular weight
font-weight: 600; // This is the bold weightfont-style: italic; // The default is regular

Дополнительное видео по вопросу: Шрифты, не появляющиеся в курятник, загруженные в Bluehost

Уроки по CSS/CSS3. Часть 20. @font-face

Как правильно подключить шрифт к сайту через CSS

@font face Подключение шрифтов