Como adicionar uma nova fonte (usando arquivos de fonte)

Adicionar uma nova fonte à plataforma Ion é semelhante a adicionar fontes à maioria das outras plataformas.

É altamente recomendável ter experiência com CSS antes de tentar. Também recomendamos revisar o guia do desenvolvedor antes de trabalhar com uma Ion Framework.

Se você tiver arquivos de fontes, precisará tê-los nos seguintes formatos para ter o mais amplo suporte entre os navegadores:

  • .eot (IE 6-9)
  • .ttf (Safari, Android, iOS)
  • .woff (navegadores modernos)
  • .woff2 (navegadores ainda mais modernos)
  • .svg (iOS legacy)

Se você tiver esses arquivos prontos, siga as etapas abaixo. Se você não tiver os arquivos de fonte mencionados acima e, em vez disso, estiver usando uma terceira parte para hospedar suas fontes (ou seja, Google Fonts, Typekit, etc.), vá para a postagem de suporte aqui.

Para adicionar sua nova fonte ao Ion, há algumas etapas que precisam ser executadas.

Primeiramente, clique na guia Libraries e selecione Frameworks para acessar a Frameworks Library.

rtaImage (2)

Clique no link Ion Framework 4 (ou na Framework na qual deseja aplicar a fonte).

rtaImage (3) (1)

Clique em Themes para ver todos os temas existentes no Framework. Passe o mouse sobre o tema ao qual deseja aplicar a fonte e clique no botão +Files. Isso abrirá a caixa de diálogo Add or Replace Files. Você pode arrastar seus arquivos para esta janela ou clicar em Browse para localizar seus arquivos.

rtaImage (4) (1)

Agora que você adicionou os arquivos de fonte ao tema, clique no arquivo “theme.css” para acessar a folha de estilo principal. Aqui é onde você informará a fonte.

Acima da classe “html”, você usará a regra @font-face para referenciar seus arquivos de fonte. Abaixo está um exemplo de uma declaração @font-face em que você substituirá “MyWebFont” pelo nome da fonte e “webfont” em cada nome de arquivo pelos seus arquivos de fonte.

@font-face {

font-family: 'MyWebFont';

src: url('webfont.eot'); /* IE9 Compat Modes */

src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('webfont.woff2') format('woff2'), /* Super Modern Browsers */

url('webfont.woff') format('woff'), /* Pretty Modern Browsers */

url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */

url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

}

Agora você carregou os arquivos de fonte e os referenciou no Theme usando a regra @font-face. Para usar sua nova fonte, basta adicionar o CSS da família de fontes aos elementos que deseja usar.

element {

font-family: 'MyWebFont', Fallback, sans-serif;

}

Para adicionar suas fontes como opções de Micro-Theme, verifique o Micro-Theme Developer's Guide.