Como adicionar uma nova fonte (usando arquivos de fonte)

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.

Para adicionar arquivos de fontes, você 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ê já tiver esses arquivos prontos, siga as etapas abaixo. Caso utilize uma plataforma de terceiros para hospedar suas fontes (Google Fonts, Typekit, etc.), consulte este outro artigo de suporte aqui.

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

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

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:

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

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 Guia do Desenvolvedor de Micro-Temas.