Como adicionar uma nova fonte (hospedada em terceiros)

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

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.

Esse método pressupõe que você não tenha arquivos de fontes e, em vez disso, esteja usando um terceiro para hospedar as fontes para você. Cada terceiro deve fornecer detalhes para instalar a fonte, mas a maioria usará uma referência de link ou a regra @import. Para uma fonte de terceiro usando o método de link, você deve ter uma linha de código semelhante a este exemplo do Google Fonts:

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

 

O método de regra @import deve ser semelhante a este:

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

 

Se você não estiver usando uma fonte hospedada e, em vez disso, tiver arquivos de fonte prontos para carregar, siga as etapas descritas neste post de suporte.

Link Method

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

rtaImage (3)

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

rtaImage (4)

Clique em Themes para mostrar todos os temas existentes na Framework, e expanda o tema ao qual você deseja adicionar a fonte.

rtaImage (5)

Na lista Theme files, abra o arquivo intitulado "webfonts.txt". Nesse arquivo de texto, você pode colar a referência do link. Abaixo está um exemplo de links para Google Fonts e FontAwesome.

rtaImage (6)

Agora basta clicar em Save and Close. Para declarar a fonte que você vinculou, clique no arquivo “theme.css” para acessar a folha de estilo principal. Aqui é onde você declarará a fonte. Para usar sua nova fonte, basta adicionar a família de fontes CSS aos elementos onde deseja usar.

element {

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

}

Método de regra @import

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

rtaImage (8)

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

rtaImage (9)

Clique em Themes para mostrar todos os temas existentes na Framework, e expanda o tema ao qual você deseja adicionar a fonte.

rtaImage (10)

Na lista de Theme files, abra o arquivo intitulado "theme.css". Aqui é onde você vai declarar a fonte.

Cole a regra @import para fazer referência aos seus arquivos de fonte e certifique-se de colocá-la acima de qualquer CSS que possa fazer referência às fontes. Abaixo está um exemplo de uma declaração @import.

rtaImage (11)

Observe, na captura de tela acima, a fonte Open Sans importada usando a regra @import sendo referenciada na classe CSS html. Assim como na captura de tela acima, você vai adicionar o CSS da família de fontes aos elementos onde deseja que essa família seja usada também.

element {

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

}

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