2014-02-10 2 views
6

Я пытаюсь использовать Google Font на странице. В моем HTML я использовал:Google шрифт не работает с загрузкой

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

И в моем CSS:

@import url('http://fonts.googleapis.com/css?family=Open+Sans'); 

Еще whenI использовать "Open Sans" с семейством шрифтов приписывать он остается на Arial.

body 
{ 
    background-color: #F1F1F2; 
    font-family: "Open Sans", Arial; 
} 
+0

У вас есть живой пример или скрипка? Я уверен, что bootstrap имеет некоторое свойство шрифта во всем текстовом элементе, таком как p, span и т. Д. Это переопределяет ваше значение font-family вашего тела. – franchez

+0

@franchez Я предполагаю, что это имело бы смысл, однако я применил метод user3217672 и, похоже, не работал с важным! – user2820

ответ

9

Использование шрифта google на любой веб-странице очень просто, и вы можете загружать шрифты асинхронно.

Если вы не используете прямой код, который Google шрифта поставляет и вы просто загрузить следующий URL:

http://fonts.googleapis.com/css?family=Open+Sans:400,600

Вы бы быть представлен исходный код (CSS).

Теперь скопируйте и вставьте отображаемый код в источник CSS вашего сайта.

Вы можете использовать выбранный Google шрифт (ы) на веб-страницы, используя следующие:

body 
{ 
    background-color: #F1F1F2; 
    font-family: 'Open Sans', Arial; 
} 

Этого достаточно, и она будет работать.

+0

Спасибо, что кажется чистым, что вложение действительно. – user2820

+0

Согласен! Спасибо за совет. – Kitson

2

Прежде всего, вам не нужно делать это дважды! любой вид FONT ASSOCIATION достаточно !!

Предупреждение о том, что чрезмерное использование @import может вызвать накладные расходы!

Bootstrap (если вы использовали его), как правило, перекрывает шрифт с ->font-family:"Helvetica Neue",Helvetica,Arial,sans-serif

Рабочая Demo ->Click here

Примечание: Я добавил шрифт в качестве внешних ресурсов. Кажется, он работает правильно!

+0

Спасибо, он отлично работает! – user2820

+0

приветствуется :) Я рад, что он сработал :) –

2

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

@import "bootstrap-sprockets"; @import "bootstrap";

Добавьте код Google после этого, чтобы убедиться, что он не переписывается загрузчиком.

Удачи!

+0

Я столкнулся с той же проблемой, но не узнал, где это решение.Здесь все это было проблемой. Большое вам спасибо за то, что вы указали это, я не думаю, что выдумал бы эту часть. – kdweber89

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