Включить приложение Google Font in Rails

Кто-нибудь знает, как я могу включить таблицу стилей шрифтов google в моем приложении rails? Я попытался добавить

<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' 
rel='stylesheet' type='text/css'>

В мой application.html.erb, но ничего не делает

Ответы

Ответ 1

Для внешней таблицы стилей добавьте это в свой макет (application.html.erb)

 stylesheet_link_tag 'application', 'put any external link'

Если вы используете 1) <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> в режиме рельсов

Настройте элемент с запрошенным веб-шрифтом либо в таблице стилей:

CSS selector {
  font-family: 'Font Name', serif;
}

или с встроенным стилем для самого элемента:

Ваш текст

у вас есть семейство шрифтов Tangerine

Пример: -

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
   <style>
     body {
      font-family: 'Tangerine', serif;
      font-size: 48px;
     }
</style>
 </head>
<body>
  <div>Making the Web Beautiful!</div>
</body>
</html>

Ответ 2

Я боролся с этим, потому что у меня была строка вроде этого:

<%= stylesheet_link_tag 'application', 
media: 'all', 'data-turbolinks-track' => true %>

Трудно сказать, где поставить свою ссылку на первый взгляд.

Что вы хотели сделать, это поместить ссылку в таблицу стилей ПОСЛЕ 'application', разделите ее запятыми. Вот так:

<%= stylesheet_link_tag 'application',
'https://fonts.googleapis.com/css?family=Open+Sans:400&subset=latin',
 media: 'all', 'data-turbolinks-track' => true %>

Затем используйте его в своей таблице стилей, как обычно, с свойством font-family.

Конечно, мы можем @import его в SASS или делать это, как обычно, с тегом ссылок, но это просто другим способом, и это нужно упомянуть здесь.

Ответ 3

application.html.erb

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<%= stylesheet_link_tag    "application", :media => "all" %>
 <%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>

 <!-- Google font -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

</head>
<body>
 ............

application.css

body {
 font-family: 'Ubuntu', sans-serif;
}

Я использую его таким образом, возможно, это прояснит.

ОБНОВЛЕНО

Попробуйте удалить ваш scaffold.css.scss! Или просто откройте и прокомментируйте всю основную часть CSS этого файла.

Ответ 4

вставьте это внутри раздела head.html.erb

<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' 
rel='stylesheet' type='text/css'>

поместите это в свой файл css:

body{
  font-family: "Raleway", Arial, sans-serif;
}

Ответ 5

Я считаю, что наиболее интегрированным способом является редактирование app/assets/views/application.html.erb и изменение:

<%= stylesheet_link_tag 'application.css' %>

<%= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Catamaran','application.css' %>

Ответ 6

Если вы добавите шрифт через @import, как показано в других комментариях, в @import Bootstrap в application.css, конвейер ресурсов компилирует его в таблицу стилей приложений. Если вы поместите его в начало своего html в качестве ссылки, он добавится в виде отдельной таблицы стилей, которая замедляет загрузку страницы. Вы можете добавить код @import так же, как Google, из шрифтов, которые вы выбрали на сайте шрифта Google.

Ответ 7

Просто добавьте код, предоставленный google, в начало вашего файла application.scss.

@import url('https://fonts.googleapis.com/css?family=Quicksand|Rubik');

обратите внимание, что рельсы предоставят вам файл application.css из коробки с требованием. удалите их и переименуйте application.scss

не забудьте добавить имя файла @import; для любых других custome scssfiles в папке

Ответ 8

Вы уверены, что ставите <link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' rel='stylesheet' type='text/css'> на ваш макет желания?

И в вашей таблице стилей <layout>.css вы положили font-family:Raleway;?

Убедитесь в этом. Спасибо.