1) CONVERTA O SEU ARQUIVO DE FONTE
Você precisa converter seu arquivo de fonte .otf ou .ttf em um @Font-Face kit. Há diferentes sites que fazem este tipo de conversão. O mais recomendável para isto é o Font Squirrel.
Clique no botão Upload Fonts e selecione seu arquivo .otf ou .ttf que você acabou de baixar/extrair do seu computador > Selecione Optimal > e verique o Agreement > Após sua fonte ter sido carregada com sucesso, clique em Download Your Kit e salve na Área de Trabalho.
Extraia os arquivos do kit de fontes da web que estão compactados em .zip. Essencialmente os únicos arquivos que você precisará são aqueles com as extensões .woff, .woff2, .tff ou .otf, .svg, .eot, além do arquivo stylesheet.css - você pode ignorar o resto, deixando-os do lado de fora da pasta.
Clique no botão Upload Fonts e selecione seu arquivo .otf ou .ttf que você acabou de baixar/extrair do seu computador > Selecione Optimal > e verique o Agreement > Após sua fonte ter sido carregada com sucesso, clique em Download Your Kit e salve na Área de Trabalho.
Extraia os arquivos do kit de fontes da web que estão compactados em .zip. Essencialmente os únicos arquivos que você precisará são aqueles com as extensões .woff, .woff2, .tff ou .otf, .svg, .eot, além do arquivo stylesheet.css - você pode ignorar o resto, deixando-os do lado de fora da pasta.
2) CARREGUE SEU ARQUIVO DE FONTE NO DROPBOX
OBSERVAÇÃO: Contas do Dropbox criadas após o dia 04/10/2012 não tem mais uma pasta pública. Cada conta criada antes desta data ainda terá uma pasta púlica. Se você quiser habilitar uma pasta pública em uma conta nova, clique aqui para habilitar uma em sua conta. Atualmente, somente usuários Pro e Dropbox for Business podem habilitar pastas públicas. Para isso, você primeiramente deve fazer um upgrade.
Fontes personalizadas no Blogger precisam ser carregadas na web antes de começar a utilizá-las em seu design do Blogger. Vamos usar o DropBox e carregar os 5 arquivos de fonte para sua pasta Pública — carregue somente os arquivos de fonte com as extensões .woff, .woff2, .tff ou .otf, .svg, and .eot.
Uma vez que você tiver as fontes carregadas, você precisará copiar os links (URLs) de cada uma das fontes. Para fazer isso, clique com o botão direito no arquivo e selecione Copy public link (Copiar link público). Para cada uma das fontes, cole este link num Notepad (Bloco de Notas), assim será facilmente acessível para o próximo passo.
O próximo passo é abrir o arquivo stylesheet.css que veio dentro do kit do qual você baixou. A forma estilizada será igual a esta:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) ... [date] */
@font-face {
font-family: 'pea_mily_mixregular';
src: url('font-name.eot');
src: url('font-name.eot?#iefix') format('embedded-opentype'),
url('font-name.woff2') format('woff2'),
url('font-name.woff') format('woff'),
url('font-name.ttf') format('truetype'),
url('font-name.svg#fontname') format('svg');
font-weight: normal;
font-style: normal;
}
Recoloque cada link (entre os apóstrofos) para indicar o arquivo que você acabou de carregar no Dropbox.
Por exemplo, o primeiro link que você precisa recolocar é o arquivo .eot. Você mudará esta linha:
src: url('font-name.eot');
para ficar algo assim:
src: url('https://dl.dropboxusercontent.com/u/########/peamilymix-webfont.eot');
Preste bastante atenção nas extensões dos arquivos para ter certeza de que você recolocou o URL do arquivo correto, e também note que o URL do .eot irá em dois lugares. Após você ter recolocado todos os links no stylesheet.css, copie todo o código em seu Bloco de Notas, que será essencial para o próximo passo!
Fontes personalizadas no Blogger precisam ser carregadas na web antes de começar a utilizá-las em seu design do Blogger. Vamos usar o DropBox e carregar os 5 arquivos de fonte para sua pasta Pública — carregue somente os arquivos de fonte com as extensões .woff, .woff2, .tff ou .otf, .svg, and .eot.
Uma vez que você tiver as fontes carregadas, você precisará copiar os links (URLs) de cada uma das fontes. Para fazer isso, clique com o botão direito no arquivo e selecione Copy public link (Copiar link público). Para cada uma das fontes, cole este link num Notepad (Bloco de Notas), assim será facilmente acessível para o próximo passo.
O próximo passo é abrir o arquivo stylesheet.css que veio dentro do kit do qual você baixou. A forma estilizada será igual a esta:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) ... [date] */
@font-face {
font-family: 'pea_mily_mixregular';
src: url('font-name.eot');
src: url('font-name.eot?#iefix') format('embedded-opentype'),
url('font-name.woff2') format('woff2'),
url('font-name.woff') format('woff'),
url('font-name.ttf') format('truetype'),
url('font-name.svg#fontname') format('svg');
font-weight: normal;
font-style: normal;
}
Recoloque cada link (entre os apóstrofos) para indicar o arquivo que você acabou de carregar no Dropbox.
Por exemplo, o primeiro link que você precisa recolocar é o arquivo .eot. Você mudará esta linha:
src: url('font-name.eot');
para ficar algo assim:
src: url('https://dl.dropboxusercontent.com/u/########/peamilymix-webfont.eot');
Preste bastante atenção nas extensões dos arquivos para ter certeza de que você recolocou o URL do arquivo correto, e também note que o URL do .eot irá em dois lugares. Após você ter recolocado todos os links no stylesheet.css, copie todo o código em seu Bloco de Notas, que será essencial para o próximo passo!
3) CARREGUE TUDO NO SEU BLOGGER
O último passo é este: Em seu blog no Blogger, vá em Template (Modelo) > Edit HTML > e procure por:
]]></b:skin>
ACIMA deste código, copie e cole o código do the stylesheet.css que você acabou de salvar em seu Bloco de Notas.
E, por último, precisamos incluir o novo código font-family no CSS. Por exemplo, se quiser mudar a fonte do título do blog, você precisaria procurar por .Header h1 e adicione o font-family entre os colchetes deste jeito:
.Header h1 {
...
font-family: 'pea_mily_mixregular' !important;
}
Adicionando o font-family para as seções de posicionamento assegura que o Blogger utilize sua nova fonte personalizada que acabamos de carregar. Após ter feito as devidas mudanças, clique em Save Template (Salvar Modelo). Verifique seu site para visualizar sua nova fonte.
]]></b:skin>
ACIMA deste código, copie e cole o código do the stylesheet.css que você acabou de salvar em seu Bloco de Notas.
E, por último, precisamos incluir o novo código font-family no CSS. Por exemplo, se quiser mudar a fonte do título do blog, você precisaria procurar por .Header h1 e adicione o font-family entre os colchetes deste jeito:
.Header h1 {
...
font-family: 'pea_mily_mixregular' !important;
}
Adicionando o font-family para as seções de posicionamento assegura que o Blogger utilize sua nova fonte personalizada que acabamos de carregar. Após ter feito as devidas mudanças, clique em Save Template (Salvar Modelo). Verifique seu site para visualizar sua nova fonte.
FONTE: Carrie Loves (original em inglês)