2015-10-07 3 views
1

Я делаю простой сайт для кого-то, и я хочу включить в него некоторые пользовательские шрифты, а именно Open Sans Condensed Light/Bold.Пользовательский шрифт CSS не загружается на домашнюю страницу сначала

Шрифт загружается. Но не на первой загрузке на странице. У вас должно быть нажмите на одну из ссылок на странице, чтобы пользовательские шрифты загружали или должны были посетить веб-сайт и сделали это до.

Это, очевидно, проблема, поскольку в первый раз посетители столкнутся с уродливым веб-сайтом. При проверке неработающего веб-сайта в firebug часть css-файла font-family имеет серое имя, что означает, что по какой-то причине оно не активировалось.

Я использую следующий код в моем CSS:

@font-face { 
    font-family: 'OpenBold'; 
    src: url('opensans-condbold-webfont.eot'); 
    src: url('opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-condbold-webfont.woff2') format('woff2'), 
     url('opensans-condbold-webfont.woff') format('woff'), 
     url('opensans-condbold-webfont.ttf') format('truetype'), 
     url('opensans-condbold-webfont.svg#open_sans_condensedbold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

@font-face { 
    font-family: 'OpenSansLight'; 
    src: url('opensans-condlight-webfont.eot'); 
    src: url('opensans-condlight-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-condlight-webfont.woff2') format('woff2'), 
     url('opensans-condlight-webfont.woff') format('woff'), 
     url('opensans-condlight-webfont.ttf') format('truetype'), 
     url('opensans-condlight-webfont.svg#open_sanscondensed_light') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 


body, html{ 
    font-family:"OpenSansLight"; 
    margin:0; 
    padding:0; 
    background-image:url(../images/sintbg1.png); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    background-attachment:fixed;  
} 

я включить мою таблицу стилей. Мои <head> выглядит как

<meta charset="utf-8"> 
<title>Sinterklaas <? echo $titel?></title> 
<base href="http://www.mywebsite.info"> 
<link href="css/style.css" type="text/css" rel="stylesheet"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

Кто-нибудь есть какие-либо идеи, что я могу изменить, чтобы сделать эту работу? Может, что-то я забыл? Я боролся с этим почти неделю.

+0

добавить свой код jsfiddle –

+1

В какой папке находятся файлы шрифтов? – Orland

+0

Кажется, проблема в пути. Но вам нужно уточнить. –

ответ

0

Я нашел ответ на свою проблему. Это связано с моей базой href.

Раньше это был href на моем сайте. Изменение его на:

<base href="http://<? echo $_SERVER['HTTP_HOST']; ?>" /> 

Решила мою проблему. Выключает шрифты только при загрузке, когда «www» помещается перед href или что-то в этом роде. Во всяком случае, я надеюсь, что это кому-то поможет! Я искал ответ в течение нескольких недель.

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