Форум Сайтостроение Веб-строительство

Как правильно установить шрифт на сайт?

[Удален]
5588

Добрый день. Тестирую сайт в разных браузерах на разных разрешениях как у себя на ПК так и по средствам сервисов. Я вижу такую нелепую картину. Шрифт который мне нужен отображается корректно только в Хроме и всё, на других сервисах он просто Arial, у меня на пк (Опера, Мозила) так-же простой Ариал, только Хром норм видит.

Вот что на сайте: 

body {

    background: #faf9f5;

    font: 12px "Open sans", Arial, Tahoma, Sans-serif;

    margin: 0;

    padding: 0;

}

В каталоге есть папка: font с шрифтами и css (fonts.css), не понимаю зачем так сделали и правильно ли это вообще.

Вопрос: Как правильно подключить шрифт чтоб он выглядел везде одинаково а не только в Хроме и не только у меня на ПК :)

Алла Рудь
На сайте с 13.08.2014
Offline
81
Алла Рудь
#1

KitayacVsupez, попробуйте перед body поставить 

@font-face {

  font-family: "Open sans";

  src: url(Open_sans.ttf); /*source to your custom font*/

  

}
Надежный хостинг и VPS на SSD от профессионалов HyperHost (https://hyperhost.ua/)
I2
На сайте с 07.03.2015
Offline
38
indenger20
#2
В каталоге есть папка: font с шрифтами и css (fonts.css), не понимаю зачем так сделали и правильно ли это вообще.

подключите файл (fonts.css) в html перед вашими основными стилями.

Качественная верстка PSD макетов (/ru/forum/974524)
WebAlt
На сайте с 02.12.2007
Offline
260
WebAlt
#3

https://www.google.com/fonts

css: 

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



body {

    background: #faf9f5;

    font: 12px 'Open Sans', sans-serif, arial, tahoma;

    margin: 0;

    padding: 0;

}

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

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,cyrillic);



body {

    background: #faf9f5;

    font-family: 'Open Sans., sans-serif, arial, tahoma font-weight: 400; }

    font-size: 100%;

    margin: 0;

    padding: 0;

}



или



body {

    background: #faf9f5;

    font-family: 'Open Sans Condensed', sans-serif, arial, tahoma font-weight: 300italic; }

    font-size: 100%;

    margin: 0;

    padding: 0;

}
[Удален]
#4
Алла Рудь:
KitayacVsupez, попробуйте перед body поставить 
@font-face {
  font-family: "Open sans";
  src: url(Open_sans.ttf); /*source to your custom font*/
  
}

У меня в папке шрифтов лежит css, вот только не вижу чтоб он был подключен :)

@font-face {
    font-family: 'Open Sans';
    src: url('../font/opensans-regular.eot');
    src: local('Open Sans'), local('OpenSans'), url('../font/opensans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Light'), local('OpenSans-Light'), url('../font/opensans-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('../font/opensans-semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../font/opensans-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url('../font/opensans-extrabold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../font/opensans-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('../font/opensans-bolditalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Extrabold Italic'), local('OpenSans-ExtraboldItalic'), url('../font/opensans-extrabolditalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url('../font/opensans-lightitalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url('../font/opensans-semibolditalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans Condensed';
    src: url('../font/open_sans_condensed_light.eot');
    src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url('../font/open_sans_condensed_light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans Condensed';
    src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url('../font/opensans-condbold.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}
@font-face {
    font-family: 'Open Sans Condensed';
    src: local('Open Sans Cond Light Italic'), local('OpenSans-CondensedLightItalic'), url('../font/opensans-condlightitalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

А нет, вот в стилях строчка: @import "../font/fonts.css";

Значит подключён, но как то неадекватно, зачем так делали хз. Видимо из за этого только Хром видет эти шрифты :)

---------- Добавлено 05.11.2015 в 14:19 ----------

Ещё такая особенность. У меня не отображались шрифты на сайте, я установил себе на пк шрифт: Open Sans Bold и сайт начал отображать установленыне на нём шрифты.

Получается смысла ставить шрифты на сайт нет? Всё равно они будут отобрать если у пользователя они есть, а если нету - то обычный arial.

---------- Добавлено 05.11.2015 в 14:36 ----------

К примеру сайт: http://goodgame.ru/

Использует шрифт: font-family: 'Open Sans', sans-serif;

А у меня отображается простой тонкий Arial. Но как только я устанавливаю: Open Sans Bold, шрифт на сайте изменяется и конечно на много приятней. Где разумное объяснение всему этому?

Вот скрин: http://pixs.ru/showimage/2015110521_1810136_19394191.png

Не у меня установленного на том сайте "Open Sans", отображается простой Arial. Как быть, куда смотреть и что делать?

А вот скрин с установленным шрифтом на ПК: http://pixs.ru/showimage/2015110522_5284338_19394506.png

ВОПРОС: Как сделать чтоб шрифт устанавливался с сайта, а не приходилось устанавливать в ручную?

Можно ли уменьшить заголовки h1 и css (нестандартный Как будем жить без

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий