🥇 Fontes da Web e Asset Pipeline do Rails

As fontes da Web estão na moda. Usar um CDN para bibliotecas de fontes, como TypeKit ou Google Fonts, será uma ótima solução para muitos projetos. Para outros, isso não é uma opção. Especialmente quando você está criando uma biblioteca de ícones personalizada para seu projeto.

Rails e o pipeline de ativos são ótimas ferramentas, mas Rails ainda não foi pego na mania de fontes da web customizadas.

Como com todas as coisas do Rails, há mais de uma maneira de esfolar esse gato. Existe a forma recomendada e, em seguida, existem as outras formas.

A forma recomendada

Aqui, vou mostrar como atualizar seu projeto Rails para que você possa usar o pipeline de recursos apropriadamente e criar recursos para seus arquivos usando a convenção comum de Rails.

O pipeline de ativos padrão

Ao procurar no assetsdiretório do seu projeto , você veria o seguinte:

|-app/
|---assets/
|-----images/
|-----javascripts/
|-----stylesheets/

O que precisamos fazer é adicionar o fontsdiretório dentro do assetsdiretório para que possamos recursos esses arquivos em nosso CSSou Sassarquivos usando as convenções de rails adequadas e o pipeline de ativos.

O problema é que simplesmente adicionar um fontsdiretório não é escolhido pelo pipeline. Por enquanto, vamos apenas adicionar isso e então corrigir o problema do Rails em seguida.

|-app/
|---assets/
|-----fonts/
|-----images/
|-----javascripts/
|-----stylesheets/

Atualizando o pipeline de ativos

A correção é muito simples. Abra o arquivo de configuração do seu projeto, localizado em e adicione a seguinte linha dentro da sua classe:config/application.rbApplication

config.assets.paths << Rails.root.join("app", "assets", "fonts")

ESTRONDO! Agora Rails é inteligente o suficiente para saber o que fazer com ativos dentro do fontsdiretório.

Caminho de fontes em seu Sass

O CSS padrão que você obterá de sites como icomoon.io normalmente será semelhante a este:

@font-face {
    font-family: 'icofonts';
    src:url('fonts/icofonts.eot');
    src:url('fonts/icofonts.eot?#iefix') format('embedded-opentype'),
        url('fonts/icofonts.ttf') format('truetype'),
        url('fonts/icofonts.woff') format('woff'),
        url('fonts/icofonts.svg#icofonts') format('svg');
    font-weight: normal;
    font-style: normal;
}

Isso parece certo, a menos que você esteja usando o pipeline de ativos. Portanto, para tornar o caminho correto, precisamos fazer uma pequena atualização e substituir por . Nosso arquivo Sass seria assim:src:url()src:font-url()

@font-face {
  font-family:'icofonts';
  src:font-url('icofonts.eot');
  src:font-url('icofonts.eot?#iefix') format('embedded-opentype'),

  ...
}

Quando o Sass é renderizado em CSS, você deve ver algo como o seguinte:

@font-face {
  font-family: 'icofonts';
  src: url(/assets/icofonts.eot);
  src: url(/assets/icofonts.eot?#iefix) format("embedded-opentype"), 
    url(/assets/icofonts.ttf) format("truetype"), 
    url(/assets/icofonts.woff) format("woff"), 
    url(/assets/icofonts.svg#icofonts) format("svg");
  font-weight: normal;
  font-style: normal;
}

Perfeito. Nossas fontes estão no assetsdiretório onde é melhor. Nosso código é limpo e segue todas as convenções Rails comuns. YAY!

A forma recomendada

Related Posts