Сообщений в теме: 5

[B_A_H_O]

Всем привет!

Я понимаю, что тема вопроса не по JBZoo, но может кто знает и поможет.

 

Хочу подключить 2 новых шрифта на сайт, но что-то не получается никак.

1 из них открытый, из каталога Гугл, Open Sans, 2-й платный, но скачанный из просторов интернета.

 

Открытый я подключал и через код в index.php и через строку @import в CSS. Не работает.

То же самое и со скачанным. Подключил вот как в коде - не работает.

Сайт http://vdrive.com.ua

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,300italic,400italic,600italic&subset=latin,cyrillic);

@font-face {
	font-family: PFHandbookPro-Thin;
	src: local("PFHandbookPro-Thin"),
		 url('Fonts/PFHandbookPro-Thin.eot');
	}

@font-face {
	font-family: PFHandbookPro-Thin;
	src: local("PFHandbookPro-Thin"),
		 url('Fonts/PFHandbookPro-Thin.ttf');
	}

В чем ошибка?

[Дмитрий]

Консоль говорит шрифт не найден - линк выдается по типу: https://fonts.google...00&subset=Latin

 

Вставка:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=latin,cyrillic,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>

И css вида:

font-family: 'Open Sans', sans-serif;

должны работать (вообще был какой-то гражданин, наглядно доказывающий, что лучше подключать через link.)

 

W3S говорит, что правильно:

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

либо шаблон чего-то режет, либо дело в лишних\отсутствующих кавычках. пример выше, точно работает.

Сообщение отредактировал Дмитрий: 01 October 2014 - 04:11

[SmetDenis]

Попробуйте прописывать url() шрифта полный путь вместе с http

[B_A_H_O]

по первому шрифту, который из гугла обнаружил проблему в том, что он просто не грузится в коде.

То есть я его прописываю в index.php шаблона, загружаю, проверяю код страницы, а этой строки там нет.

Пробовал и с разными кавычками ' ' " ", и переставлял местами теги внутри <Link>, и добавлял в конце стоки слеш />  - все-равно не грузится, нет этой строки в коде. Что за феномен?

[SmetDenis]

Консоль говорит что все ссылки на шрифты - битые

[B_A_H_O]

Всем спасибо за советы и за помощь.

Проблема решена, кое где банально. Не знаю на сколько это правильно, но ...

Ссылка на гугловский шрифт ведет на css. Поэтому я просто взял и прописал эти стили у себя в CSS - работает.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTRsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/uYKcPVoh6c5R0NpdEY5A-Q.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxv25ds880Du_gFZbUlZlsbg.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v10/O4NhV7_qs9r9seTo7fnsVD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxpXMLUeV6_io0G3F6eXSVcg.woff) format('woff');
}

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

@font-face {
	font-family: 'PFHandbookPro-Thin';
	src: url('/Fonts/PFHandbookPro-Thin.eot') format('embedded-opentype');
	src: url('/Fonts/PFHandbookPro-Thin.ttf') format('truetype');
	font-weight: normal;
    font-style: normal;
	}