Muitas vezes, o c\u00f3digo se parece com isso<\/a><\/strong> :<\/p>\n E ent\u00e3o voc\u00ea pode us\u00e1-lo em sua folha de estilo assim<\/a> :<\/p>\n Mas e se algu\u00e9m fornecer a voc\u00ea um conjunto de fontes que deseja usar em seu projeto que estejam em formato de arquivo e que n\u00e3o estejam hospedados em algum tipo de rede de entrega de conte\u00fado?<\/p>\n Primeiro, vale a pena notar que, para usar determinadas fontes em seus projetos, elas precisam estar sob uma licen\u00e7a espec\u00edfica. Este n\u00e3o \u00e9 o post que discutir\u00e1 os v\u00e1rios tipos de licenciamento, mas certifique-se de ter permiss\u00e3o para a fonte.<\/p>\n Em segundo lugar, observe que existem diferentes formatos de fontes. No exemplo abaixo, voc\u00ea ver\u00e1 que estou usando o formato OpenType. A vers\u00e3o TL;DR disso \u00e9 a seguinte:<\/p>\n O formato OpenType \u00e9 um superconjunto dos formatos de fonte TrueType e Adobe\u00ae PostScript\u00ae Type 1 existentes. Ele permite portabilidade aprimorada de documentos entre plataformas, suporte lingu\u00edstico avan\u00e7ado, recursos tipogr\u00e1ficos poderosos e requisitos simplificados de gerenciamento de fontes.<\/p>\n<\/blockquote>\n Se voc\u00ea estiver interessado, voc\u00ea pode ler mais aqui<\/a><\/strong>.<\/p>\n Terceiro, quando se trata de trabalhar com essas fontes, folhas de estilo e incorpor\u00e1-las no contexto de um plug-in do WordPress, acho importante \u2013 como qualquer outra coisa \u2013 manter as coisas organizadas.<\/p>\n Dentro do diret\u00f3rio assets, normalmente tenho um diret\u00f3rio css<\/strong> e js<\/strong>. \u00c0s vezes, isso tamb\u00e9m inclui imagens<\/strong> e, neste exemplo, tamb\u00e9m inclui fontes<\/strong>.<\/p>\n Uma vez que as fontes s\u00e3o colocadas no diret\u00f3rio apropriado, \u00e9 muito f\u00e1cil inclu\u00ed-las em sua folha de estilo. Primeiro, voc\u00ea os define assim<\/a><\/strong> :<\/p>\n E ent\u00e3o voc\u00ea pode us\u00e1-los (junto com um fallback adequado) assim<\/a><\/strong> :<\/p>\n Para ser completo, vale a pena notar que voc\u00ea simplesmente conecta as folhas de estilo como faria com qualquer outro em um plugin:<\/a><\/strong><\/p>\n Isso \u00e9 tudo.<\/p>\n Claro, tudo isso \u00e9 f\u00e1cil de acompanhar, mas os principais pontos que valem a pena notar s\u00e3o:<\/p>\n E \u00e9 isso.<\/p>\n![\"Incluindo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162272-61e73a560748d.png\")
<\/a><\/p>\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto\" rel=\"stylesheet\"> <\/code><\/pre>\nfont-family: 'Roboto', sans-serif;<\/code><\/pre>\nFontes personalizadas em plugins do WordPress<\/h2>\n
\n
Organizando fontes dentro de um plugin<\/h3>\n
![\"Incluindo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162272-61e73a591dfc1.png\")
<\/a><\/p>\n@font-face {\n font-family: GothamLight;\n src: url(\"..\/fonts\/Gotham-Light.otf\") format(\"opentype\");\n}\n\n@font-face {\n font-family: ThirstyScriptMedium;\n src: url(\"..\/fonts\/ThirstyScriptMedium.otf\") format(\"opentype\");\n}<\/code><\/pre>\n#search_keywords {\n background: #ffffff;\n color: #151335;\n font-family: 'GothamLight', sans-serif;\n}<\/code><\/pre>\n<?php\n\nadd_action('wp_enqueue_scripts', 'acme_enqueue_styles');\n\/**\n * Registers the stylesheet for the Acme Plugin Styles.\n *\/\nfunction acme_enqueue_styles()\n{\n wp_enqueue_style(\n 'acme-visuals',\n plugin_dir_url(dirname(__FILE__)).'assets\/css\/public.css',\n [],\n rand(),\n 'screen'\n );\n}\n<\/code><\/pre>\nUma postagem simples<\/h2>\n
\n