As fontes desempenham um papel enorme no design do site. O mesmo texto escrito em fontes diferentes pode produzir impressões opostas em uma pessoa.

Veja por si mesmo:

Algumas fontes parecem mais convincentes, outras mais intrigantes.

Mas como conectar quaisquer fontes ao site e aplicá-las onde quiser?

Neste artigo eu Eu vou te mostrar 3 maneiras, com o qual você pode conectar qualquer uma das fontes mais diversas e fora do padrão ao seu site. E não importa qual CMS você usa: WordPress, Joomla, Drupal ou Open Cart.

Você verá que não há nada complicado em conectar fontes ao site.

Você vai aprender:

Método número 1. Conexão rápida de fontes a um site WordPress (dificuldade: ⭐ ⭐ ⭐)

Se um tema premium estiver instalado em seu site, você poderá conectar fontes em 2 minutos.

Por exemplo:

Você deseja alterar a fonte dos títulos dos seus artigos. Por esta:

1. No painel de administração, vá para a seção Opções de Tema. Dependendo do seu modelo, esta seção pode ser chamada de forma um pouco diferente, mas o significado é sempre o mesmo - "configurações de tema".

2. Vá para a seção Tipografia.

3. Selecione o elemento cuja fonte deseja alterar (títulos, parágrafos):

Se o seu site estiver sendo executado em um mecanismo diferente ou se seu tema não fornecer essas configurações, vá para o próximo método.

Método número 2. Use o poder do Google Fonts
(dificuldade: ⭐ ⭐ ⭐ ⭐)

Você já ouviu falar do Google Fonts? Em suma, este é um serviço com o qual você pode conectar mais de 700 fontes ao seu site.

Passo 1. Acesse o site oficial do serviço.

Etapa 2. Encontre as fontes que combinam com você na coleção de fontes do Google. No menu à direita, você pode restringir o círculo definindo o idioma, o estilo e a popularidade da fonte:

Para que o serviço mostre fontes com suporte para o idioma russo, selecione Cirílico no item Idiomas.

Passo 3 Digamos que você goste da fonte Roboto. Clique no ícone "+":

Você pode adicionar qualquer fonte clicando no sinal "+".

Passo 4. Depois disso, você precisa expandir a cesta com as fontes selecionadas:

Ao acessar a guia Personalizar, você pode escolher estilos e idiomas. Em relação aos estilos, aconselho a escolher um conjunto padrão - normal (400), itálico (400 itálico), negrito (700) e itálico-negrito (negrito 700 itálico):

Mas se você quiser apenas negrito (para títulos), escolha apenas isso.

Lembre-se, quanto mais estilos você escolher, maior será o tamanho do arquivo enviado.

Para não diminuir a velocidade de carregamento do site, escolha o menor número possível de estilos de fonte.

Etapa 5. Retorne à seção Incorporar e selecione a guia @IMPORT. Em seguida, copie a linha de código que contém "@import" e cole-a na primeira linha do arquivo CSS do seu site:

Se você tem um site WordPress, o arquivo CSS provavelmente está localizado aqui: wp_content/themes/"seutema"/css/... Na pasta CSS, provavelmente haverá um arquivo Fonts, onde você precisa transferir o código de incorporação do Google:

Não importa em qual CMS seu site está rodando, basta colar o código e tudo será 👌

Como as fontes devem ser carregadas primeiro, só depois todo o resto - coloque o código de conexão da fonte no início do arquivo CSS.

Você pode definir a fonte para determinados elementos do site no mesmo arquivo CSS.

Por exemplo:

Para dar a fonte Roboto a todos os parágrafos, escreverei o seguinte: p ( font-family: Roboto;)

Método número 3. Conexão de fonte personalizada usando CSS (dificuldade: ⭐ ⭐ ⭐ ⭐ ⭐)

Se você for habilidoso o suficiente, sua melhor aposta é incluir as fontes você mesmo via CSS. Nesse caso, as fontes estarão localizadas em seu servidor em uma pasta especial. Mas primeiro você precisa levá-los a algum lugar.

Onde obter fontes da web para o site

Você sabia que precisa comprar uma licença separada para usar fontes da web?

Conecte fontes com uma licença gratuita. A maneira mais fácil de encontrá-los é com o serviço Fontsquirrel, que faremos.

Passo 1. Acesse o site oficial do serviço

Passo 2. No menu direito, na seção Idiomas, selecione Cirílico.

Etapa 3. Encontre uma fonte adequada. Preste atenção ao número de fontes.

Por exemplo, se houver 4 estilos, 4 estilos serão escritos:

Designação dos estilos de fonte - normal (400/regular), itálico (itálico), negrito (700/negrito), negrito itálico (700 itálico).

Passo 5. Clique no nome da fonte e vá para a página de configurações.

Etapa 6. Vá para a seção Webfont Kit. Selecione todos os formatos de fonte e clique em Download @FONT-FACE KIT. Se apenas 1-2 formatos estiverem disponíveis, não é assustador.

Para incluir fontes, use @Font-face

Por meio da diretiva @font-face, você pode incluir uma ou mais fontes em seu site. Mas este método tem seus prós e contras.

Prós:

• Através do CSS, você pode incluir fontes de qualquer formato: ttf, otf, woff, svg.
• Os arquivos de fonte estarão localizados em seu servidor - você não dependerá de serviços de terceiros.

Desvantagens:

• Para a conexão correta da fonte para cada estilo, você precisa escrever um código separado.
• Sem saber CSS, é fácil ficar confuso.

Você pode simplesmente copiar meu código finalizado e onde você precisa colocar seus valores.

Etapa 1. Transfira os arquivos de fonte baixados para o seu site. Isso pode ser feito através do painel de controle de sua hospedagem ou via FTP.

Sugiro criar uma pasta de fontes no mesmo diretório do seu arquivo CSS. Mova todos os arquivos de fonte para esta pasta.

Etapa 2. Escreva a seguinte entrada no início do arquivo CSS:

@Tipo de letra(
font-family: "MyWebFont";
src: url("../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") format("eot"),
url("../fonts/WebFont.woff") format("woff"),
url("../fonts/WebFont.ttf") format("truetype"),
url("../fonts/WebFont.svg#webfont") format("svg");
peso da fonte: normal
estilo da fonte: normal
}

Onde MyWebFont é o nome da fonte e o valor da propriedade src (dados entre parênteses entre aspas) é sua localização (links relativos). Precisamos especificar cada estilo separadamente.

Como primeiro incluímos uma fonte normal, definimos as propriedades font-weight e font-style como normal.

Etapa 3. Ao conectar o estilo itálico, escreva o seguinte:

@Tipo de letra(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url("../fonts/WebFont-Italic.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic.woff") format("woff"),
url("../fonts/WebFont-Italic.ttf") format("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") format("svg");
peso da fonte: normal
estilo de fonte: itálico;
}

Onde tudo é igual, apenas atribuímos à propriedade font-style o valor itálico.

Etapa 4. Para ativar o estilo em negrito, adicione o seguinte código:

@Tipo de letra(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Bold.woff") format("woff"),
url("../fonts/WebFont-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") format("svg");
intensidade da fonte: Negrito;
estilo da fonte: normal
}

Onde definimos a propriedade font-weight como negrito.

Certifique-se de especificar o local correto para os arquivos de fonte de cada estilo.

Etapa 5. Para habilitar o tipo negrito e itálico, escreva o seguinte:

@Tipo de letra(
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic-Bold.woff") format("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") format("svg");
intensidade da fonte: Negrito;
estilo de fonte: itálico;
}

Bem, é isso :) Você acabou de adicionar 4 estilos de fonte ao seu site.

Mas há uma observação - essa conexão de fontes não será exibida corretamente no navegador Internet Explorer 8. O consolo é que restam muito poucas delas.

Como conectar fontes para sites em diferentes CMS

Não importa em qual mecanismo seu site está (WordPress, Joomla, Drupal, Opencart) - se você tiver acesso ao arquivo CSS, poderá conectar as fontes por meio do Google Fonts ou enviando-as para seu servidor por meio do Fontsquirrel.

Bom, isso é tudo. Se você acha que este artigo pode ser útil para outros webmasters, compartilhe-o nas redes sociais.

Assim como:

Assine minha newsletter para não perder posts úteis e interessantes.

Muitos designers que criam layouts sérios e interessantes têm toneladas de fontes únicas e bonitas disponíveis. Graças a essas fontes, o design ganha sabor e exclusividade. Mas as fontes fora do padrão só serão exibidas no computador em que já estão instaladas, portanto, para funcionar corretamente com elas, o designer deve fornecer todas as fontes que ele usa em seu layout. Porque ao fazer o layout, você terá que instalar essas fontes no seu computador. Mas o usuário do seu site não fará o download de todas as fontes para si mesmo e não as instalará em seu computador; portanto, você precisa fazer com que o navegador abra as fontes necessárias por conta própria. A regra ajudará aqui, ainda há opções para usar Cufon ou baixar fontes do Google Webfonts ou Fontsquirrel, mas o Google Webfonts e Fontsquirrel podem não precisar de uma fonte, então considere a melhor opção - conectar fontes exclusivas usando @font-face.

A maneira mais fácil de incluir uma fonte é escrevê-la em uma folha de estilo:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body( font-family: "PF Din CompPro", Arial, sans-serif ; )

Aqui 'PF Din CompPro' é o nome da fonte, e então você pode especificar essa fonte para os elementos necessários do site, e fonts/pfdintextcomppro-medium-webfont.ttf é o caminho para sua fonte, que está na pasta de fontes, é importante que no nome não houvesse espaços no arquivo de fonte, melhor substituí-los por travessões.

Esta é a maneira mais fácil, mas simplesmente não funciona em todos os navegadores, e isso é um grande problema.

Cada navegador suporta seus próprios formatos de fonte:
tipo verdadeiro Fontes para Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fontes para Internet Explorer 4+
WOFF fontes para Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG Fontes para iPad e iPhone

Portanto, você terá que fazer várias outras fontes iguais a partir de uma de suas fontes no formato .ttf, apenas em um formato diferente. É aqui que o gerador de fontes em fontsquirrel.com é útil. Nesta página, carregue sua fonte, selecione as configurações ideais, marque a caixa de seleção confirmando a legalidade da fonte baixada (algumas fontes custam muito dinheiro e você deve ter permissão para usá-las) e clique no botão “Baixar seu kit” e você receberá o arquivo necessário com todos os formatos de sua fonte.

Baixe todos os formatos de suas fontes do arquivo, teoricamente são 4 arquivos com as extensões .eot, .svg, .ttf e .woff, copie esses arquivos para a pasta de fontes do seu site, o arquivo stylesheet.css também estar no arquivo - nele todas as regras para conectar fontes já estarão escritas, você pode copiá-las com segurança para sua folha de estilo, mas não se esqueça de especificar seus caminhos para arquivos de fontes, por exemplo, para a pasta de fontes. Um exemplo do que aconteceu em um dos meus sites:

@font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix" ) format("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") format("truetype" ), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg"); font-weight: normal; font-style: normal; ) body( font-family: "PF Din CompPro", Arial, Tahoma, Verdana, sem serifa; )

Com essas configurações, as fontes são exibidas em todos os navegadores, incluindo o amado IE-7-8-9.

Se você estiver usando fontes não padrão para cirílico, ou seja, para caracteres russos, e a fonte for exibida incorretamente no site, a geração de uma fonte com configurações avançadas pode ajudar, na página http://www.fontsquirrel.com/tools /webfont-generator baixe sua fonte e selecione as configurações "Expert". Existem muitas configurações, não sei tudo, mas leia com atenção e selecione as que você precisa, e para dar suporte ao cirílico, selecione no bloco Subconfiguração: a seção Custom Subsetting... e marque a caixa de seleção Cirílico, e também marque os idiomas e os formatos que você precisa.

Aqui está um exemplo do que eu tenho:

O que um visitante do site realmente vê ao usar uma fonte da Web não padrão neste estágio de desenvolvimento do navegador?

Muitos sofrem ao criar um site. Em muitos casos, o site exige o uso de uma fonte ou hieróglifo fora do padrão. Você baixa uma fonte bonita e começa a organizar a página, mas nem todos os usuários têm essas fontes. Alguns não se envergonham e simplesmente criam um arquivo gráfico usando a fonte de que precisam, mas gráficos adicionais nem sempre se encaixam na página e muitos já os têm em quantidade suficiente. Mas há uma saída adequada! Esta saída é usar a tecnologia CSS (Cascading Style Sheets) ou simplesmente "Cascading Style Sheets". Normalmente o CSS é incluído no próprio arquivo criado, a página, mas você pode criar um arquivo CSS (.css) separadamente e conectá-lo preenchendo entre a tag portanto:

E com a ajuda do CSS, precisamos baixar e instalar automaticamente o arquivo de fonte True Type Font (.ttf), mas a instalação só ocorrerá se o computador do usuário não detectar a fonte necessária. Em primeiro lugar, devemos especificar a localização da fonte. Para fazer isso, escrevemos entre as tags E Assim:

Assim, você pode usar qualquer fonte em seu site. Mas aconselho a não ser muito sofisticado, pois o processo de download e instalação de uma fonte também requer um certo tempo. E se sua fonte em si "pesar" 500kb ou mais, não é recomendável usá-la nesse caso.

Para ser honesto, é mais fácil e correto fazer isso:

Embora as fontes da Web sejam suportadas pela maioria dos navegadores, elas são problemáticas no Opera desde o início. Em alguns sistemas, eles não funcionam, naqueles que funcionam, as páginas podem ou não funcionar ao recarregar:

Portanto, isso não deve ser usado em projetos sérios, apenas em blogs pessoais e apenas para textos maiores que 30px, para não ver as maravilhas do anti-aliasing e kerning.

Ao mesmo tempo Google fornece - API para conexão entre navegadores de fontes não padrão.

Deixando a Web Linda!

O Google detecta o navegador e emite CSS e fonte válidos para ele.