Как добавить настраиваемый шрифт в приложение Rails?

У меня есть несколько шрифтов, которые я хотел бы использовать в своем приложении RoR, но их форматы в основном .ttf и .otf, среди прочих. Как я могу вложить эти файлы в мое приложение Rails? А именно, как только я поместил их в папку с моими активами, что именно для меня синтаксис для их внедрения в мои файлы CSS и/или LESS?

EDIT: Вот код, который у меня есть сейчас:

@font-face {
    font-family: Vow;
    src: url('/assets/Vow.otf');
}
h1 {
    font-family: Vow;
    text-align: center;
}

Кажется, он не работает для меня. Результат в консоли Rails - это что-то вроде строк:

ActionController::RoutingError (No route matches [GET] "/assets/Vow.otf")

И изучение страницы с помощью Firebug говорит:

downloadable font: download failed (font-family: "Vow" style:normal weight:normal stretch:normal src index:0): status=2147746065
source: http://localhost:3000/assets/Vow.otf

Ответы

Ответ 1

Оформить заказ http://www.css3.info/preview/web-fonts-with-font-face/

Более крупный пример, предполагая, что они разрешены непосредственно под активами dir

@font-face {
  font-family: 'Nokia Pure Headline';    
  src: url('/assets/nokiapureheadlinerg-webfont.eot');
  src: url('/assets/nokiapureheadlinerg-webfont.eot?iefix') format('eot'),
  url('/assets/nokiapureheadlinerg-webfont.woff') format('woff'),
  url('/assets/nokiapureheadlinerg-webfont.ttf') format('truetype'),
  url('/assets/nokiapureheadlinerg-webfont.svg#webfont3AwWkQXK') format('svg');
  font-weight: normal;
  font-style: normal;
}

Мне жаль, что я не знаю МЕНЬШЕ

Кроме того, для конфигурации конвейера активов для содержимого доступных ресурсов/шрифтов мы используем:

# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << Rails.root.join('/app/assets/fonts')

Ответ 2

Добавление настраиваемого шрифта в приложение Rails

Выберите тип шрифта и загрузите его например,
перейдите к http://www.dafont.com
шрифт и шрифт загрузки
Сгенерировать файлы шрифтов

перейти к http://www.fontsquirrel.com/
select - web font generator - выберите шрифт u download (распакуйте файл, загруженный с http://www.dafont.com).
Получить файлы шрифтов
Этот сайт будет генерировать другой zip, который содержит все необходимые для этого стиля шрифта.
Из этого почтового индекса распакуйте и откройте css, скопируйте css в свой html или css файл этого
Добавить шрифт в ваше приложение rails

(Как добавить настраиваемый шрифт в приложение Rails?)

config/application.rb
```
 config.assets.enabled = true  
 config.assets.paths << "#{Rails.root}/app/assets/fonts"  
```

Добавьте его в представление:

<html lang="en">  
  <head>  
    <style>  
      @font-face {  
        font-family: 'a_sensible_armadilloregular';  
        src: url('/assets/para/a_sensible_armadillo-webfont.eot');  
        src: url('/assets/para/a_sensible_armadillo-webfont.eot?#iefix') format('embedded-opentype'),  
          url('/assets/para/a_sensible_armadillo-webfont.woff') format('woff'),  
          url('/assets/para/a_sensible_armadillo-webfont.ttf') format('truetype'),  
          url('/assets/para/a_sensible_armadillo-webfont.svg#a_sensible_armadilloregular') format('svg');  
        font-weight: normal;  
        font-style: normal;  
     }  
     .content p {  
        font-family: 'a_sensible_armadilloregular';  
        font-size: 42px;  
     }  
   </style>  
 </head>  
 <body>  
   <div class="content">  
     <p>sample text</p>  
   </div>  
 </body>

Ответ 3

добавить пользовательский шрифт в приложение Rails с помощью шрифтов Google

например, я использую Freckle Face
http://www.google.com/fonts#QuickUsePlace:quickUse/Family:
Быстрое использование: лицо веснушки

1. Выберите нужные стили:
Влияние на время загрузки страницы
Совет. Использование многих стилей шрифтов может замедлить вашу веб-страницу, поэтому выберите только те стили шрифтов, которые вам действительно нужны на вашей веб-странице.

2. Выберите нужные вам наборы символов:
Совет. Если вы выберете только те языки, которые вам нужны, вы поможете предотвратить медлительность на своей веб-странице.
Латинский (латинский)
Latin Extended (латинский-ext)

3. Добавьте этот код на свой веб-сайт:
Инструкции. Чтобы внедрить свою коллекцию в свою веб-страницу, скопируйте код как первый элемент в своем HTML-документе.
http://fonts.googleapis.com/css?family=Freckle+Face 'rel=' stylesheet 'type =' text/css ' >

4. Интегрируйте шрифты в свой CSS:
API Google Fonts создаст необходимый CSS-браузер для использования шрифтов. Все, что вам нужно сделать, это добавить имя шрифта в ваши стили CSS. Например:

 font-family: 'Freckle Face', cursive;

Инструкции: добавьте имя шрифта в ваши стили CSS так же, как обычно с любым другим шрифтом.

Пример:

 h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }  
  example :  
 <head>  
  <meta charset='UTF-8' />  
  <link href='http://fonts.googleapis.com/css?family=Freckle+Face' rel='stylesheet' type='text/css'>  
 </head>  
 <body>  
 <div id="header">  
  <div id="nav">  
   <a href="#contact">Contact</a> <span style="word-spacing:normal; color:white; font-family: 'Freckle Face', cursive;, arial, serif; font-size:20px;"><--Click a link to see this page in action!</span>  
  </div>  
 </div>  
 </body>