Como adicionar fontes de fontes da Web do Google no tema WordPress. Como conectar a fonte do Google Fonts? Conectando fontes do Google Fontts CSS

Para descobrir tudo a si mesmo - não é fácil, mas muito interessante. Se você tiver pelo menos uma ideia superficial de como funciona o site, é melhor que eles implementem seu projeto. Ao mesmo tempo, você não apenas salvará um monte de dinheiro, mas também aprenderá muitos "chips", segredos, etc. Usando o Google Fonts geralmente não atrai a atenção, embora graças a eles um blog possa se tornar mais interessante.

Serviço

Por muito tempo, um grande serviço de fontes da Web apareceu na internet. Foi desenvolvido pelo Google. Os usuários poderiam usá-lo gratuitamente. Apesar do fato de que a configuração desse tipo não é considerada super super, ainda há essas pessoas que cometeram erros e não podiam lidar com o serviço.

Para fazer isso, um design simples foi projetado especificamente. Agora funciona com as fontes do Google Fonts tornou-se mais fácil, e o número de visitantes aumentou. Biblioteca expandida. No ano passado, um novo serviço foi realizado, que reuniu muito feedback positivo. Agora as pessoas se tornaram mais fáceis de conectar fontes aos seus sites e visualizá-los.

Aparência

Então, para aqueles que nunca estiveram no site com o design antigo, você precisa fazer uma imagem geral das mudanças. No passado, o serviço parecia bastante massivamente. Em todos os lugares havia quadros grossos, botões cativantes de azul, os gráficos não eram a maior permissão. Tudo isso influenciou significativamente o visitante.

Agora os desenvolvedores se concentraram no design do material. Todos os recursos sofisticados adquiridos. Aparência Ele se tornou "mais fácil". Animação fina, a interatividade tornou-se perceptível. Nada mais distrai a atenção da seleção da fonte desejada do Google Fontes.

Houve uma adaptação conveniente do recurso sob dispositivos móveis. Claro, tal mudança não é muito perceptível no contexto das inovações, mas levando em conta bugs versão anterior Será para os usuários ávidos do "Manna Celestial".

Oportunidade

Serviços frequentes semelhantes são usados \u200b\u200bpor designers. Apesar de sua experiência e profissionalismo, eles também trabalham com visualização. O redesenho apresentou características mais semelhantes que permitiriam que você combine antecipadamente o que será necessário implementar mais tarde em seu projeto.

Portanto, o problema com a forma como uma fonte é combinada com uma cor diferente e o terceiro plano de fundo, desapareceu. A empresa adicionou mais ferramentas e uma paleta com tons universais, que permitiriam experimentar e descobrir como uma ou outra fonte procurará em uma cor específica.

Selecionado

O serviço Fonts Fonts do Google fornece aos usuários o uso de opções selecionadas. Em uma guia especial, um conjunto de estilos que o desenvolvedor recomenda que o uso seja coletado. Essas coleções são alocadas entre os outros. Eles são desenvolvidos por especialistas do Google e das agências de terceiros. A maioria deles tem um certo estilo e filosofia especial.

Visualizar

Uma das mudanças importantes afetadas diretamente a escolha de fontes. Entende-se que mais cedo o usuário viu algum desenho com botões adicionais e um azul grande, que adicionou uma fonte à coleção. Em geral, esta opção parecia boa, mas nem sempre a caixa era suficiente boa permissão Fotos com estilo, e, portanto, determinam definitivamente, como a fonte será difícil, era difícil.

Havia perguntas e esses botões adicionais que pouco eram conhecidos à primeira vista. Foi necessário trazê-los sobre eles ou usar. Agora ficou mais ou menos claro. Existem características adicionais:

Selecione uma proposta específica, parágrafo ou seu próprio elemento de texto.
Experimentos de saturação de fonte.
Configuração rápida de tamanhos usando um controle deslizante.

By the way, a mudança no tamanho das fontes do Google se tornou adaptável, pois apenas um exemplo mudou, e nem tudo na página. DENTRO versão antiga Os usuários poderiam ser transferidos de uma borda da página para outra, e no novo você apenas permanecer no exemplo que é regulado.

Conexão

Se você estiver pronto para usar este serviço, poderá tentar conectar fontes ao seu recurso. O processo de obtenção de links é universal. Problemas podem surgir dependendo do seu sistema CMS. Cada um usa suas próprias maneiras. Portanto, para diferentes projetos terá que selecionar opções individuais.

Vamos ver como obter um link para conectar fontes do Google. Você precisa ir ao site oficial da Google Fonts. Lá você está visualizando o catálogo de estilos e escolha o que melhor se adapte. Para fazer isso, ao lado dele, clique em "Plusik". Depois que a fonte será adicionada ao bloco especial na parte inferior da página.

Clique nesta unidade e, em seguida, configure-o. Aqui você pode escolher a inscrição e o alfabeto necessário. Se você precisar do Google Fonts Cyrillic, marque a string cyrillic. Depois que o link será formado. Ele pode ser encontrado na mesma janela na guia incorporada. É suficiente apenas copiá-lo ou usar o código HTML completo.

Geralmente nas configurações do site há uma fonte e cores. Existem opções padrão e você pode adicionar estendido. Eles têm uma opção separada para fontes do Google. Se você precisar baixar fontes através do plugin Supreme WebFonts.

Opções populares

É difícil, é claro, julgar quais estilos são melhores, especialmente para diferentes assuntos do site. Ao criar seu site, lembre-se de que ele não deveria gostar de você, mas seu público. Portanto, é melhor olhar para os locais dos concorrentes.

Geralmente para recursos comerciais, ninguém se incomoda sobre estilos. Afinal, se você vir a fonte em Google Chrome. Na loja online, é improvável que você preste atenção a ele. Mas se você tem um blog, então provavelmente, algo que você pode gostar, e algo, pelo contrário, irritará.

O Google Fonts preparou muitas coleções nas quais existem estilos populares. Por exemplo, o lagosta gosta de usar para blocos individuais no texto. É difícil ler se todo o artigo é escrito em um itálico tão negrito. Mas parece bom inserções e citações.

O Bad Script também é uma opção para blogs. Tipo cursivo pesado para ler grandes matrizes de texto, mas você pode alocar a ideia principal. O estilo imita caligrafia manuscrita. Jura Normal 400 é uma opção interessante para cirílico. O autor afirma que este é o Eurostil da família SENS SERIP. Parece muito bom e tem várias variações.

O WebFonts é a tecnologia de usar fontes de terceiros em sua página da Web. Um exemplo:

Se você começar da fonte, a tag da fonte foi introduzida em 1995, e já em 1996 uma definição de software foi gravada em CSS. A partir da versão CSS 2.0, a síntese da fonte foi introduzida e a síntese dos navegadores, mas ainda assim ainda popular, e agora o IE antigo e irrelevante não tinha suporte para o carregamento de fontes, o que impediu o rápido desenvolvimento de fontes em seu site.

DENTRO internet moderna Fontes da Web são uma coisa longa. Em sites diferentes, podemos usar todos os tipos de fontes, que, por sua vez, não estão incluídos no fornecimento de um sistema operacional específico, mas há um efeito colateral indesejável, que falaremos hoje e conversaremos.

Formatos de arquivo

Para conectar as fontes, a inserção de software em CSS é usada, a chamada @ -evilo. Soluço. forma simples @ Font-face é uma declaração. Se parece com isso:

/ * Declare a fonte Font * / @ Face-Face (Font-face: "Nome da fonte"; SRC: URL ("Path / Up / IT");) / * Aplicar * / P (Face-face: "Nome da fonte" , Arial;)
TTF ou OTF - o arquivo de fonte usual, mas carregado do servidor durante o horário de visualização do site;

O WOFF é um arquivo de fonte OTF ou TTF desprotegido, talvez o formato mais importante que os navegadores mais populares suportem e os arquivos no WOFF geralmente 2-2.5 vezes mais fáceis que o original;

EOT - introduziu o Arquivo OpenType TT, com mecanismos de proteção, necessários para suportar navegadores antigos Internet Explorer. (Começando com o IE8, exceto curvas de TrueType, suportado e PostScript);

SVG - para apoiar o navegador Safari.

Preparado para implementação (@ Font-Face) para as fontes do site hoje deve ser imediatamente em vários formatos. Você percebeu que existem algumas discrepâncias, assim como não há um tipo sistemas operacionais. Os formatos de fonte são bastante, mas o concreto só funcionará em um espectador. Quanto a esses formatos mais, por que é necessário especificá-los tanto quando conectado, então eles são necessários para o suporte de navegador cruzado do site.

@ Font-Face (Font-Família: "Ashift_name"; SRC: URL ("file_name_shift.eot"); SRC: URL ("file_file_shift.eot? #IFIFIX") formato ("arquivo incorporado"), URL ("arquivo formato name_shift .woff ") (" woff "), URL (" file_shift.ttf ") Formato (" TrueType "), URL (" file_fail_name.svg # dsnoteregular ");" SVG "); Peso da fonte: normal; Fonte -stilo: normal;)
Se você quiser usar o código criptografado em vez do arquivo, neste caso, a Base64 chega a ajudar, que funciona no mesmo princípio e com imagens, no entanto, para o antigo IE Base64 não é processada.

@ Font-Face (Font-Família: "Ashift_name"; SRC: URL ("file_name_shift.eot");) @ Font-face (Família de fontes: "Ashift_name"; SRC: URL (dados: charset \u003d Formato UTF-8; Base64, Dados) ("WOFF"), URL (Dados: Fonte / TrueType; Charset \u003d Formato UTF-8; Base64, Dados) ("TrueType"), URL ("arquivo_name_svg #file_shot_name") "Svg"); Peso de fonte: normal; estilo de fonte: normal;)

OpenType incorporado?

Como você pode notar, os plug-ins para o IE têm uma linha com esse parâmetro:

SRC: URL ("file_file_sot? #Iefix") FORMAT ("Embedded-OpenType")
Na versão clássica, tivemos que especificar com você dessa maneira:

SRC: URL ("file_shift.eot") Formato ("Embedded-OpenType")
Mas ao adicionar um símbolo "?" Após o formato da fonte, especificamos forçosamente o navegador para não ler o seguinte formato de indicação ("incorporado-opentype"). O Internet Explorer suporta a incorporação de fontes através da chamada padrão OpenType incorporado, começando com a versão 4.0. Ele usa um método de gerenciamento de direitos digitais para evitar as fontes que se aplicam à licença.

E se a fonte não for suportada no navegador?

Há muito tempo, as estradas de bypass já foram inventadas, as chamadas "muletas" para exibir uma fonte. Há casos em que a fonte foi projetada apenas no formato SVG, ou apenas no formato TTF.

1. Nos velhos tempos, os desenvolvedores conectavam a imagem, que por sua vez foi o texto marcado em editor visual. No entanto, agora é considerado um tom ruim, para o suporte é previsto (você precisa abrir o editor novamente para alterar o texto da imagem), respectivamente, o usuário não pode copiar o texto da imagem.

2. Também é comum o uso de soluções flash.

3. Outra solução é usando javascript.Para substituir o texto com VML (para Internet Explorer) ou SVG (para todos os outros navegadores).

Quais problemas ainda podem ocorrer?

O navegador tentará sincronizar o carregamento da fonte, ele tentará esconder o texto, ou seja, para torná-lo invisível até que a fonte tenha sido carregada. Este efeito é chamado Foit, o efeito do "flash branco".

Efeito flash.

Efeito de foit em navegadores, como safári, cromo, ópera, o Firefox tende a ocultar o texto dentro de um máximo de 30 segundos antes de se recusar a obter uma fonte, após o qual a fonte padrão é definida.

Um exemplo de como a fonte é carregada:

No entanto, 2,7 segundos há muito tempo!

O que pode ser feito?

Inicialmente, a abordagem era permitir a conversão de arquivos de fonte aos dados de URIS para que essas fontes possam ser incluídas diretamente nas definições da família da fonte no arquivo CSS. Ao baixar essa maneira assíncrona do arquivo CSS, você pode garantir que o navegador dê imediatamente texto na página usando fontes personalizadas, e novas fontes seriam usadas assim que CSS seriam carregadas.

No entanto, em qualquer experimento, há um efeito colateral.

Inicialmente, Bram Stein usou uma fonte personalizada, mas depois que sua fonte foi carregada, "Flicker" ocorreu, no exemplo de 0,7 segundo:

Em suma, o flicker ocorre quando o navegador está tentando exibir a fonte da fonte Facely e aplicá-lo a HTML. A fonte definida na face @ fonte da declaração, que ainda não foi carregada.

Bram Stein mostrou como conectar as fontes corretamente, desenvolveu um script, uma alternativa ao Google para um carregamento de fonte assíncrona, este é um script fontfaceobserver.

Tentando

Análise

Conexão padrão do Google

Honestamente, usando mais de uma fonte no site, você pode desacelerar especificamente a velocidade de carregamento do site, aumentando assim o tempo total de carga. O Google Fonts API permite que você adicione rapidamente uma fonte ao site usando o gerador de fontes, projetando assim seu site. No entanto, você precisa se lembrar do efeito do Foit. Tempo total de carga - 322 ms.

Web Font Loader do Google

Web Font Loader - Biblioteca JavaScript para trabalho avançado com API, uma biblioteca que nos dá mais controle sobre o carregamento da fonte do que a API padrão do Google Fontes. O script nos permite usar muitas fontes, carregando-as sequencialmente ou de forma assíncrona. Em contraste com a conexão padrão, o texto com fonte padrão é exibido em conexões fracas, até que a fonte seja carregada.
Tempo total de carga: 1132 ms

Fontfaceobserver

FontfaceObserver é uma biblioteca JavaScript (5KB), um chamado inicial compatível com qualquer serviço da Web de fonte. O script nos permite nos notificar se a fonte carregada ou não, permite que você rastreie um evento após o download e até o carregamento da fonte. Tempo total de carga: 159 ms

Usando o script.

O Google Fonts é um dos melhores recursos com fontes Web gratuitas, e o Google oferece várias maneiras de importá-las para o seu site. Infelizmente, nenhum deles inclui um popular motor WordPress. Isso significa que você deve usar plugins, que são muito ou embalar as mãos, criando com o código.

Boa notícia é que você pode instalar qualquer fonte de bibliotecas do Google. Quase qualquer tópico do WordPress sem muitos problemas. Como exatamente - vamos te ensinar hoje.

Existem duas opções - conectar o plug-in ou um pouco para perfurar com o arquivo functions.php.

Mas primeiro gostaria de listar as vantagens e desvantagens das fontes do Google para que você finalmente decida usá-las em nossos projetos ou não.

Boas e Bad Google Web Fonts

Quanto às fontes da Web, o Google é um dos melhores opções em termos de desempenho . Tudo devido a design leve e sistema de cache. Os visitantes não devem esperar pela Google Fonts, se recentemente visitaram o site em que foram usados. Fontes populares, como a Open Sans, podem melhorar o desempenho do seu site, reduzindo o tempo de download.

Outra característica é que O Google permite que você faça o upload dessas fontes Então você pode usá-los em seus layouts.

E finalmente a plataforma é totalmente gratuita . Para começar a usar fontes, você só precisa fazer o login ou iniciar caixa de correio No Gmail (e quem não tem correspondência hoje para o Gmail?).

De falhas Você pode especificar que a escolha do Google Fonts é pequena Muitos deles são semelhantes entre si. É necessário gastar muito tempo em busca de encontrar uma fonte decente e original. Fontes por Cyrillic muito pouco.

Além disso, há problemas de segurança - Você precisa especificar alguns dados pessoais ao instalar fontes do Google em seu site.

Como instalar o Google Fonts usando Plugins WordPress

Se você estiver procurando por plugins, a primeira coisa que você vê nos resultados da pesquisa - plagings WP Google Fonts e Fácil Fontes da Web do Google . Estes são realmente os dois melhores plugins.

Plugins não são a solução ideal para configurar o Google.- WordPress site websitestos - não apenas do ponto de vista do desempenho, mas também porque os plugins não permitem que você escolha certas peças de texto. No entanto, se você ou seu cliente estiverem confiantes de que é melhor usar plugins, olhe para essas duas opções.

Este plugin permite que você se concentre em elementos específicos, como manchetes H1, parágrafos e cotações. Você também recebe uma opção CSS personalizada para mais trabalho com estilos selecionados. Adicione e configure fontes do Google no seu site WordPress com este plugin com bastante facilidade.

Fontes fáceis do Google Web justificam seu nome e torna a instalação do Google Fonts Super Easy até mesmo para iniciantes. Você pode usar o recurso de visualização ao vivo para visualizar, testar e otimizar fontes sem sair do site, bem como criar suas próprias regras de fonte sem escrever uma linha de código.

A maneira certa de instalar fontes do Google no modelo WordPress

No final, chegamos à opção de abrir o arquivo functions.php e trabalhar com um código. Antes de fazer isso, você precisa escolher uma fonte da Biblioteca do Google. Por exemplo, vamos tentar fazer um muito popular Aberto sans..

Então você precisa escolher o estilo de fonte - normal, gorduroso ou itálico. Você é capaz de fazer isso sozinho :)

Depois de escolher estilos, o Google lhe dará um código de snippet. Nossa se parece com isso:

Além disso, temos estilo CSS:

fonte-Família: "Abra", Sans Serif;

Agora é hora de abrir o arquivo functions.php (caminho para o arquivo: conteúdo WP / temas / yourtheme). No final do arquivo, adicione um novo recurso:

função Load_Fonts ()
{
WP_REGISTER_STYLE ("ET-Googlefonts",
"http://fonts.googleapis.com/css?family\u003dOpen+sans:300Italic.400,500.300"); Wp_enqueue_style ("ET-Googlefonts");
}
Add_ction ("wp_print_styles", "load_fonts");

A chave desse recurso é o comando "wp_enqueue_style", que faz com que o WordPress ligue para a tabela de estilos de fonte no cabeçalho de cada página. Se você olhar com cuidado, você verá, nós excluímos o href \u003d e o rel link \u003d 'stylesheet' tipo icext / css ', do código que o Google nos deu, e você precisará fazer o mesmo se quiser adicionar Outra fonte do Google para o seu site no WordPress.

Tudo o que você precisa fazer agora é abrir o arquivo CSS principal e inserir um estilo com a abertura. Existem regras normais aqui, então adicione o seguinte código na folha de estilo, salve e atualize:

corpo.
{
Font: Normal 1em "Abra", Sans-Serif;
Cor: # 313131;
}

Este estilo funcionará ao longo do site. Para fragmentos de texto individuais você pode definir outro estilo:

Texto em negrito
{
Font: Bold 1em "Aberto", Sans-Serif;
}

Como você pode ver, na verdade, tudo é muito simples. Tente e marque o resultado :)

Apesar das novas tecnologias e startups da Web, até recentemente, faltamos os ricos e bela tipografia da Web..

Embora tenhamos uma seleção bastante grande de headsets, só poderíamos usar um determinado conjunto de fontes adequadas instaladas e suportadas pela maioria dos computadores - essas fontes eram conhecidas como - Fontes Web seguras (fontes de segurança da Web).

Tipografia da Web contra a casa de impressão impressa

Ao criar conteúdo sobre mídia tradicional (jornais, revistas, livros) no uso de tipografia, apenas potencial criativo limita você.

Mas agora, a separação entre as transportadoras impressas e virtuais é reduzida. Agora @ fonte de fontes de fonte muitos navegadores modernos (incluindo o Internet Explorer Da versão. Ie4.0.).

Introdução ao Google Font API

Diretório do Google Font e API do Google Font são serviços gratuitos da Web de GoogleIsso fornece aos proprietários do site a oportunidade de usar várias fontes simples, convenientes e eficientes.

API da fonte do Google. - um novo representante do nicho, que inclui Typekit., Typotheque. e etc.

Então vamos entrar no potencial inexplorado API da fonte do Google..

Qual é a API da Google Font?

Você viajou muito na internet, mas viu fontes não padrão em muitos sites ou blogs?

Vamos determinar fontes não-padrão que não estão entre os seguros ( Arial, Helvética., Verdana., Geórgia. e Vezes novo romano.).

API da fonte do Google. - Este é um serviço da Web fornecendo fontes abertas de alta qualidade (open source) que podem ser facilmente usadas em seu design.

Nós esperamos que coleção de fontes Continuará a crescer para que tenhamos uma escolha ainda maior de vários fones de ouvido.

Benefícios de usar o Google Font API

Se você ainda decidir se deve usar API da fonte do Google., Aqui estão algumas de suas vantagens.

Usando texto HTML.

Em contraste com o uso de imagens ou substituições CSS. Fundo-imagem, usando @ font-face, como soluções para uma tipografia mais atraente, mais favoravelmente em termos de plano SEO..

Além disso, você não precisará alterar o conteúdo existente - você só atualiza seu CSS. Mesas.

Disponibilidade

Como você usa Html. Texto, não uma imagem ou plano de fundo CSS.Isso não afeta as pessoas usando programas para leitura na tela.

Infraestrutura confiável e carga reduzida no seu servidor

Desde que o download do seu @ font-face usa infraestrutura confiável GoogleVocê pode ter certeza de que o serviço de arquivo de fonte será rapidamente e você pode reduzir a carga no seu próprio servidor.

Como usar o Google Font API

Você não precisa ser um desenvolvedor web profissional para usar API da fonte do Google.. Tudo o que você precisa fazer é adicionar um item de link de folha de estilo à sua página, após o qual você pode começar a usar esta fonte em CSS..

Aqui está um processo generalizado de uso API da fonte do Google.:

Passo 1: Adicionando um link para uma folha de estilo com fonte selecionada

Para começar a ir para coleção de fontes GooglePara ver quais fontes estão disponíveis para uso. Aqui está o formato principal para inclusão de uma fonte específica:

Se você precisar de uma fonte por uso único, poderá declarar o estilo de uma linha.

Etapa 3: Sempre tenha uma opção de reposição.

Você não pode prestar atenção ao fato de que nos fragmentos de código anteriores usamos Serif como uma fonte sobressalente. Isso é feito para evitar resultados inesperados. Isso significa que, se com servidores Google Algo está errado, o navegador pode usar sua fonte padrão Serif.. Faça com um hábito quando você usa o atributo Font-face, ele não importa se você usa @ Font-face ou não, sempre especifique fontes adicionais - esta tecnologia é chamada de sets de fontes.

Exemplo de usar o Google Font API

Copie e cole o seguinte código de bloco no seu Html. Documento, salve-o e, em seguida, abra no seu navegador.

Sugerimos testar o seu Html. Documento em vários navegadores, para que você possa ver diferenças de navegador cruzado (ou sua ausência).

Você pode experimentar fontes diferentes, mas, por exemplo, usamos o fone de ouvido da lagosta.

< html >

< head >

< link rel = "stylesheet" type = "text/css" href \u003d. http://fonts.googleapis.com/css?family\u003dlobster ">

< / head >

< body >

< h1 > Seis revisões são lindas!< / h1 >

< / body >

< / html >

Resultado:

Pedido de uso de várias fontes com o Google Font API

Digamos que você precise de três fontes de Diretório de fontes do Google.. Não faça muitas solicitações. Várias solicitações aumentam o número Http. Solicitações de. Menor quantidade Http. As solicitações reduz o tempo de resposta da página da Web.

Em vez de uma multiplicidade de tags de linksheet, use o seguinte formato para a propriedade HREF de uma tag de link de uma folha de estilo.

Exemplo abaixo irá carregar todas as três fontes ( Vollkorn., Yanone. e Droid sans.) Usando um pedido.

Vollkorn. | Yanone. | Droid + sans.

Agora você pode usar qualquer uma dessas três fontes em seus estilos.

O que deve prestar atenção a

Nomes de fonte separados usando | sem espaços. Preste atenção ao uso de + na fonte Droid sans.. Use o símbolo + nos nomes de fonte em vez de um espaço.

Dica: Usando também número grande Fontes em uma consulta podem aumentar o tempo de resposta da página. Carregue apenas essas fontes que você realmente precisa. Ser conservador.

Peso e estilo fontes fontes API

Fontes de peso também têm vários parâmetros de peso / estilo. Para usá-los, adicione ao nome da fonte do cólon (:) e, em seguida, especifique o estilo e o peso.

No exemplo abaixo, indicamos negrito. e negrito itálico para Vollkorn., EU. itálico para Inconsolata..

http: //fonts.googleapis.com/css?family\u003dvollkorn: b.,bI| Inconsolata: eU.| Droid + sans

O que prestar atenção a

Use o cólon (:) sem espaço após o nome da fonte e especifique o nome do estilo (i.e. bolditalic) ou a redução correspondente (isto é, BI). Se você precisar de muitas variedades de uma fonte, divida-as com uma vírgula () sem espaços.

A API da fonte do Google faz uma tipografia da Web mais atraente

A indústria de web design está procurando ativamente uma solução para o antigo problema de escolher e usar fontes da Web e, como, @ Font-face é uma resposta.

Claro, existem plugins diferentes para usar as fontes das fontes do Google Web no seu site do WordPress, no entanto, se você estiver desenvolvendo seu próprio tópico, talvez seja necessário fechar a tipografia com ela por você, ignorando os plugins. Abaixo vamos mostrar como usar fontes da Web do Google em seu tema.

Primeiro, vamos ao site Google Web Fonts. E escolha a fonte que precisamos aplicar no assunto. Com a ajuda de ferramentas especiais localizadas no lado esquerdo, você pode restringir a área de pesquisa, já que as fontes são muito muito. Eu sabia que tinha uma fonte gorda serif para manchetes e nomes de blogs, então escolhi serif no menu suspenso Categorias e depois movi o controle deslizante de espessura (espessura) para a direita.

Como resultado, as opções 617 se ofereceram suavemente caiu para 5. Você tem muitas opções para executar pré-visualização Fontes - Você pode ver como a palavra será, oferecer, parágrafo de texto ou pôster na fonte selecionada. Você pode selecionar um texto predefinido, poderá especificar seu próprio texto, selecione o tamanho da fonte desejado.

Depois de ter encontrado a fonte que você deseja usar em seu site, basta clicar no botão Adicionar ao Coleção.

Você pode adicionar dezenas de fontes à sua coleção. No entanto, isso nem sempre é necessário. Se você puder fazer isso, isso não significa que você faça isso. Tente se limitar com um máximo de três fontes. E ainda melhor dois. Por razões, eu ainda gosto de usar uma fonte segura desatualizada da Web para o texto principal de texto e salvar fontes da Web para manchetes e outros elementos que exigem expressividade especial ou atenção a si mesmo. Comerier sobre a clareza de suas fontes - você não deve usar uma fonte cativante se seus visitantes não podem desmontar o que é escrito.

Quando você adiciona suas fontes à coleção, você os verá na seção azul na parte inferior do site. Uma vez que sua coleção apareça as fontes que você deseja usar, basta clicar no botão Usar.

Depois disso, você passará para a tela na qual uma instrução que consiste em quatro etapas será apresentada. Disso, você aprenderá como usar fontes. Se você deseja baixar fontes selecionadas para usá-las em um editor gráfico para avaliá-los ou fazer uma captura de tela atraente de screenshot.png para o seu tópico, basta clicar no botão de download na parte superior da página. Se você quiser apenas usar a fonte em seu tema, então você não precisa baixá-lo para o seu computador.

No primeiro passo, você pode escolher os estilos e a espessura do plug-in. Na segunda etapa, você pode escolher um conjunto de caracteres que deseja se conectar. Você também pode avaliar como sua coleção de fontes refletirá sobre a velocidade do carregamento da página.

Agora vamos ao terceiro passo, o que não é mais tão simples quanto os anteriores. Na terceira etapa, recebemos o código que você precisa adicionar aos nossos sites - três opções diferentes. Selecionamos a opção Padrão - no entanto, somos um pouco a partir das instruções do Google para apoiar os métodos estabelecidos para adicionar estilos a temas WordPress. No código para a versão padrão, copie apenas o URL, que é especificado como o atributo href para a tag link.

Em seguida, abra o arquivo de tema functions.php. Vamos criar um recurso para baixar CSS, que usaremos em nosso tópico:

Função ggl_load_styles () ()

Veja o prefixo GG da minha função? Este é um dos praticantes bem-sucedidos do WordPress. Sempre adicione um prefixo aos nomes de suas funções no WordPress para reduzir o risco de conflitos com outras funções em seu tópico, subsidiária ou plug-ins.

Agora, nesta função, precisamos registrar nossa tabela de estilos recebidos do Google:

Função ggl_load_styles () (if (! Is_admin ()) (wp_register_style ("googlefont", "http://fonts.googleapis.com/css?family\u003dholtwood+O+SC|Rouge+Script");)

Nós usamos a função WP_REGISTER_STYLE. O primeiro argumento é um descritor, ou seja. Uma redução que podemos usar para apelar para esta tabela estilista no futuro em nosso código. O segundo argumento é o caminho para o arquivo. Usamos o URL que recebemos no terceiro passo das instruções do Google.

Em seguida, conectamos nossa tabela de estilo básico para o nosso tópico. Espero que você não coloque a tag de link na seção da cabeça do seu header.php ficheiro? Em caso afirmativo, volte para o arquivo e exclua este código. Em seguida, conecte a tabela de estilo no arquivo functions.php:

Função ggl_load_styles () (if (! Is_admin ()) (wp_register_style ("googlefont", "http://fonts.googleapis.com/css?family\u003dholtwood+O+SC|Rougeice+Script"); wp_enqueue_style ("Ggl ", get_stylesheet_uri (), array (" googlefont ")))))

Nós usamos a função WP_ENQUEUE_STYLE. Tem os mesmos argumentos que WP_REGISTER_STYLE. Primeiro, amarramos um descritor para a nossa mesa estilista. Em seguida, pegue o caminho para a nossa mesa de estilo. Felizmente, no WordPress, você pode obter o caminho através da função get_stylesheet_uri (). Depois disso, indicamos dependências. Nosso arquivo Style.css depende da tabela de estilo da Google Web Fonts.

Finalmente, usamos o gancho wp_enqueue_scripts para chamar nossa função:

Com o arquivo functions.php é concluído. Agora deixamos para fazer o último passo para usar a fonte selecionada. Quarta etapa B. instruções do Google. Mostra que valores devemos passar para a propriedade da Font-Família para usar nossa fonte. Eu quero fazer todas as minhas manchetes com Holtwood One SC:

H1, H2, H3, H4, H5, H6 (Fonte-Família: "Holtwood One SC", Serif;)

E eu quero fazer uma descrição do site. Rouge Script:

Descrição do site (Família de fontes: "script redondo", cursivo;)

Tudo! Não mais não faz nada! Você adicionou fontes da Google Web Fonts ao seu tema WordPress. Use-os responsáveis!