Como adicionar uma nova fonte (hospedada por terceiros)

Para adicionar uma nova fonte ao Ion, é altamente recomendável ter experiência com CSS, assim como 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 sites de terceiros 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 terceiros 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 artigo de ajuda.

Link Method

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

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

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

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:

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:

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

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

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:

Observe, na captura de tela acima, a fonte Open Sans importada usando a regra @import sendo referenciada na classe CSS html. Assim como nesta imagem, 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 Guia do Desenvolvedor de Micro-Temas.