{"id":1319,"date":"2025-03-11T09:14:17","date_gmt":"2025-03-11T09:14:17","guid":{"rendered":"https:\/\/sergiomartins.pt\/v2\/?p=1319"},"modified":"2025-06-07T07:29:49","modified_gmt":"2025-06-07T07:29:49","slug":"como-usar-font-face-no-css-para-fontes-personalizadas","status":"publish","type":"post","link":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/","title":{"rendered":"Como Usar @font-face no CSS para Fontes Personalizadas"},"content":{"rendered":"\n<p>O uso de fontes personalizadas pode fazer toda a diferen\u00e7a no design de um site, tornando-o mais atrativo e alinhado com a identidade visual desejada. No CSS, a regra <code>@font-face<\/code> permite carregar fontes externas, garantindo que os visitantes vejam o site exatamente como planeado, independentemente das fontes instaladas nos seus dispositivos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O Que \u00e9 @font-face?<\/h2>\n\n\n\n<p><code>@font-face<\/code> \u00e9 uma regra do CSS que permite importar e utilizar fontes personalizadas diretamente nos teus estilos. Isso significa que n\u00e3o precisas depender apenas das fontes padr\u00e3o do sistema operativo do utilizador.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como Usar @font-face<\/h2>\n\n\n\n<p>Para usar <code>@font-face<\/code>, segue estes passos:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Faz o download da fonte<\/strong> no formato <code>.woff<\/code>, <code>.ttf<\/code>, ou outro suportado.<\/li>\n\n\n\n<li><strong>Guarda a fonte na pasta do teu projeto<\/strong>, por exemplo, <code>fonts\/<\/code>.<\/li>\n\n\n\n<li><strong>Adiciona a regra <\/strong><code><strong>@font-face<\/strong><\/code><strong> ao teu CSS`<\/strong>, especificando o caminho para o ficheiro da fonte.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Exemplo Simples de @font-face:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n    font-family: 'MinhaFonte';\n    src: url('fonts\/MinhaFonte.woff') format('woff');\n    font-weight: normal;\n    font-style: normal;\n}\n\nbody {\n    font-family: 'MinhaFonte', Arial, sans-serif;\n    font-size: 16px;\n    color: #333;\n}<\/code><\/pre>\n\n\n\n<p>Neste exemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A fonte personalizada chama-se <code>MinhaFonte<\/code>.<\/li>\n\n\n\n<li>O ficheiro da fonte est\u00e1 guardado na pasta <code>fonts\/<\/code>.<\/li>\n\n\n\n<li>O navegador usa esta fonte no <code>body<\/code>, e se n\u00e3o conseguir carreg\u00e1-la, usa <code>Arial<\/code> como alternativa.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Trabalhar com M\u00faltiplas Fontes<\/h2>\n\n\n\n<p>Se quiseres usar mais do que uma fonte personalizada, basta definir v\u00e1rias regras <code>@font-face<\/code>, uma para cada fonte:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n    font-family: 'Mexican';\n    src: url('fonts\/MexicanTequila.woff') format('woff');\n}\n\n@font-face {\n    font-family: 'Western';\n    src: url('fonts\/WesternStyle.woff') format('woff');\n}\n\nh1 {\n    font-family: 'Western', Georgia, serif;\n}\n\np {\n    font-family: 'Mexican', 'Courier New', monospace;\n}<\/code><\/pre>\n\n\n\n<p>Neste caso:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Os <code>&lt;h1><\/code> usam a fonte <code>Western<\/code>, com <code>Georgia<\/code> como alternativa.<\/li>\n\n\n\n<li>Os <code>&lt;p><\/code> usam <code>Mexican<\/code>, e se falhar, <code>Courier New<\/code>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Fontes Personalizadas com Varia\u00e7\u00f5es de Peso<\/h2>\n\n\n\n<p>Se tens uma fonte com diferentes estilos (normal, negrito, it\u00e1lico, etc.), podes defini-las separadamente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n    font-family: 'MinhaFonte';\n    src: url('fonts\/MinhaFonte-Regular.woff') format('woff');\n    font-weight: normal;\n}\n\n@font-face {\n    font-family: 'MinhaFonte';\n    src: url('fonts\/MinhaFonte-Bold.woff') format('woff');\n    font-weight: bold;\n}\n\np {\n    font-family: 'MinhaFonte', sans-serif;\n    font-weight: bold;\n}<\/code><\/pre>\n\n\n\n<p>Desta forma, quando aplicares <code>font-weight: bold;<\/code>, o navegador escolher\u00e1 automaticamente a vers\u00e3o negrito da fonte.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Melhor Pr\u00e1tica: Usar Formato .WOFF<\/h2>\n\n\n\n<p>O formato mais recomendado \u00e9 o <code>.woff<\/code> ou <code>.woff2<\/code>, pois s\u00e3o compactos e amplamente suportados. Se tens fontes em <code>.ttf<\/code> ou <code>.otf<\/code>, podes convert\u00ea-las para <code>.woff<\/code> com ferramentas online como <a>CloudConvert<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>A regra <code>@font-face<\/code> \u00e9 uma ferramenta essencial para personalizar a tipografia do teu site. Seguindo as boas pr\u00e1ticas e garantindo a compatibilidade, podes oferecer uma experi\u00eancia visual mais rica e coerente aos utilizadores.<\/p>\n\n\n\n<p>Se tens um site em WordPress, podes aplicar estes conceitos ao teu ficheiro CSS personalizado ou num tema filho para evitar perder as altera\u00e7\u00f5es em atualiza\u00e7\u00f5es do tema principal. Boas experi\u00eancias com <code>@font-face<\/code>! \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O uso de fontes personalizadas pode fazer toda a diferen\u00e7a no design de um site, tornando-o mais atrativo e alinhado com a identidade visual desejada. No CSS, a regra @font-face permite carregar fontes externas, garantindo que os visitantes vejam o site exatamente como planeado, independentemente das fontes instaladas nos seus dispositivos. O Que \u00e9 @font-face?&hellip;&nbsp;<a href=\"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/\" rel=\"bookmark\">Ler mais &raquo;<span class=\"screen-reader-text\">Como Usar @font-face no CSS para Fontes Personalizadas<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1321,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","pgc_sgb_lightbox_settings":"","yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[33,24,3],"tags":[],"class_list":["post-1319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aprendizagem","category-informatica","category-multimedia"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Como Usar @font-face no CSS para Fontes Personalizadas | S\u00e9rgio Martins<\/title>\n<meta name=\"description\" content=\"Personaliza o design do teu site com fontes \u00fanicas! Aprende a usar @font-face no CSS e garante uma tipografia exclusiva.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Usar @font-face no CSS para Fontes Personalizadas | S\u00e9rgio Martins\" \/>\n<meta property=\"og:description\" content=\"Personaliza o design do teu site com fontes \u00fanicas! Aprende a usar @font-face no CSS e garante uma tipografia exclusiva.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/\" \/>\n<meta property=\"og:site_name\" content=\"S\u00e9rgio Martins\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/sdamartins\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/sdamartins\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-11T09:14:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-07T07:29:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sergiomartins.pt\/v2\/wp-content\/uploads\/2025\/03\/font-face.png\" \/>\n\t<meta property=\"og:image:width\" content=\"558\" \/>\n\t<meta property=\"og:image:height\" content=\"257\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"S\u00e9rgio Martins\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@xgaizkax\" \/>\n<meta name=\"twitter:site\" content=\"@xgaizkax\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"S\u00e9rgio Martins\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/2025\\\/03\\\/11\\\/como-usar-font-face-no-css-para-fontes-personalizadas\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/2025\\\/03\\\/11\\\/como-usar-font-face-no-css-para-fontes-personalizadas\\\/\"},\"author\":{\"name\":\"S\u00e9rgio Martins\",\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/#\\\/schema\\\/person\\\/bb5349babbbc5938334da011717d9520\"},\"headline\":\"Como Usar @font-face no CSS para Fontes Personalizadas\",\"datePublished\":\"2025-03-11T09:14:17+00:00\",\"dateModified\":\"2025-06-07T07:29:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/2025\\\/03\\\/11\\\/como-usar-font-face-no-css-para-fontes-personalizadas\\\/\"},\"wordCount\":346,\"publisher\":{\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/#\\\/schema\\\/person\\\/bb5349babbbc5938334da011717d9520\"},\"image\":{\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/2025\\\/03\\\/11\\\/como-usar-font-face-no-css-para-fontes-personalizadas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/font-face.png\",\"articleSection\":[\"Aprendizagem\",\"Inform\u00e1tica\",\"Multim\u00e9dia\"],\"inLanguage\":\"pt-PT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/2025\\\/03\\\/11\\\/como-usar-font-face-no-css-para-fontes-personalizadas\\\/\",\"url\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/2025\\\/03\\\/11\\\/como-usar-font-face-no-css-para-fontes-personalizadas\\\/\",\"name\":\"Como Usar @font-face no CSS para Fontes Personalizadas | S\u00e9rgio Martins\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/2025\\\/03\\\/11\\\/como-usar-font-face-no-css-para-fontes-personalizadas\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/2025\\\/03\\\/11\\\/como-usar-font-face-no-css-para-fontes-personalizadas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/font-face.png\",\"datePublished\":\"2025-03-11T09:14:17+00:00\",\"dateModified\":\"2025-06-07T07:29:49+00:00\",\"description\":\"Personaliza o design do teu site com fontes \u00fanicas! Aprende a usar @font-face no CSS e garante uma tipografia exclusiva.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/2025\\\/03\\\/11\\\/como-usar-font-face-no-css-para-fontes-personalizadas\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/2025\\\/03\\\/11\\\/como-usar-font-face-no-css-para-fontes-personalizadas\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/2025\\\/03\\\/11\\\/como-usar-font-face-no-css-para-fontes-personalizadas\\\/#primaryimage\",\"url\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/font-face.png\",\"contentUrl\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/font-face.png\",\"width\":558,\"height\":257},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/2025\\\/03\\\/11\\\/como-usar-font-face-no-css-para-fontes-personalizadas\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como Usar @font-face no CSS para Fontes Personalizadas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/#website\",\"url\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/\",\"name\":\"S\u00e9rgio Martins\",\"description\":\"Realizador e formador de multim&eacute;dia e inform&aacute;tica.\",\"publisher\":{\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/#\\\/schema\\\/person\\\/bb5349babbbc5938334da011717d9520\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/#\\\/schema\\\/person\\\/bb5349babbbc5938334da011717d9520\",\"name\":\"S\u00e9rgio Martins\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/frente-1.jpg\",\"url\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/frente-1.jpg\",\"contentUrl\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/frente-1.jpg\",\"width\":820,\"height\":1024,\"caption\":\"S\u00e9rgio Martins\"},\"logo\":{\"@id\":\"https:\\\/\\\/sergiomartins.pt\\\/v2\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/frente-1.jpg\"},\"description\":\"S\u00e9rgio Daniel Almeida Martins (Nogueira do Cravo, Oliveira de Azem\u00e9is, 22 de Setembro de 1985) \u00e9 um realizador e escritor portugu\u00eas. Al\u00e9m desta actividade, \u00e9 formador em diversas escolas, nomeadamente na Academia de Design e Cal\u00e7ado e na Associa\u00e7\u00e3o do Porto de Paralisia Cerebral, tendo tamb\u00e9m j\u00e1 passado por escolas como Centro de Forma\u00e7\u00e3o Profissional da Ind\u00fastria Electr\u00f3nica, Energia, Telecomunica\u00e7\u00f5es e Tecnologias da Informa\u00e7\u00e3o ou Universidade de Tr\u00e1s-os-Montes e Alto Douro\",\"sameAs\":[\"http:\\\/\\\/sergiomartins.pt\",\"https:\\\/\\\/www.facebook.com\\\/sdamartins\",\"sergiomartins.pt\",\"https:\\\/\\\/x.com\\\/xgaizkax\"]},false]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como Usar @font-face no CSS para Fontes Personalizadas | S\u00e9rgio Martins","description":"Personaliza o design do teu site com fontes \u00fanicas! Aprende a usar @font-face no CSS e garante uma tipografia exclusiva.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Usar @font-face no CSS para Fontes Personalizadas | S\u00e9rgio Martins","og_description":"Personaliza o design do teu site com fontes \u00fanicas! Aprende a usar @font-face no CSS e garante uma tipografia exclusiva.","og_url":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/","og_site_name":"S\u00e9rgio Martins","article_publisher":"https:\/\/www.facebook.com\/sdamartins","article_author":"https:\/\/www.facebook.com\/sdamartins","article_published_time":"2025-03-11T09:14:17+00:00","article_modified_time":"2025-06-07T07:29:49+00:00","og_image":[{"width":558,"height":257,"url":"https:\/\/sergiomartins.pt\/v2\/wp-content\/uploads\/2025\/03\/font-face.png","type":"image\/png"}],"author":"S\u00e9rgio Martins","twitter_card":"summary_large_image","twitter_creator":"@xgaizkax","twitter_site":"@xgaizkax","twitter_misc":{"Escrito por":"S\u00e9rgio Martins","Tempo estimado de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/#article","isPartOf":{"@id":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/"},"author":{"name":"S\u00e9rgio Martins","@id":"https:\/\/sergiomartins.pt\/v2\/#\/schema\/person\/bb5349babbbc5938334da011717d9520"},"headline":"Como Usar @font-face no CSS para Fontes Personalizadas","datePublished":"2025-03-11T09:14:17+00:00","dateModified":"2025-06-07T07:29:49+00:00","mainEntityOfPage":{"@id":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/"},"wordCount":346,"publisher":{"@id":"https:\/\/sergiomartins.pt\/v2\/#\/schema\/person\/bb5349babbbc5938334da011717d9520"},"image":{"@id":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/#primaryimage"},"thumbnailUrl":"https:\/\/sergiomartins.pt\/v2\/wp-content\/uploads\/2025\/03\/font-face.png","articleSection":["Aprendizagem","Inform\u00e1tica","Multim\u00e9dia"],"inLanguage":"pt-PT"},{"@type":"WebPage","@id":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/","url":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/","name":"Como Usar @font-face no CSS para Fontes Personalizadas | S\u00e9rgio Martins","isPartOf":{"@id":"https:\/\/sergiomartins.pt\/v2\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/#primaryimage"},"image":{"@id":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/#primaryimage"},"thumbnailUrl":"https:\/\/sergiomartins.pt\/v2\/wp-content\/uploads\/2025\/03\/font-face.png","datePublished":"2025-03-11T09:14:17+00:00","dateModified":"2025-06-07T07:29:49+00:00","description":"Personaliza o design do teu site com fontes \u00fanicas! Aprende a usar @font-face no CSS e garante uma tipografia exclusiva.","breadcrumb":{"@id":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/#primaryimage","url":"https:\/\/sergiomartins.pt\/v2\/wp-content\/uploads\/2025\/03\/font-face.png","contentUrl":"https:\/\/sergiomartins.pt\/v2\/wp-content\/uploads\/2025\/03\/font-face.png","width":558,"height":257},{"@type":"BreadcrumbList","@id":"https:\/\/sergiomartins.pt\/v2\/2025\/03\/11\/como-usar-font-face-no-css-para-fontes-personalizadas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/sergiomartins.pt\/v2\/"},{"@type":"ListItem","position":2,"name":"Como Usar @font-face no CSS para Fontes Personalizadas"}]},{"@type":"WebSite","@id":"https:\/\/sergiomartins.pt\/v2\/#website","url":"https:\/\/sergiomartins.pt\/v2\/","name":"S\u00e9rgio Martins","description":"Realizador e formador de multim&eacute;dia e inform&aacute;tica.","publisher":{"@id":"https:\/\/sergiomartins.pt\/v2\/#\/schema\/person\/bb5349babbbc5938334da011717d9520"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sergiomartins.pt\/v2\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":["Person","Organization"],"@id":"https:\/\/sergiomartins.pt\/v2\/#\/schema\/person\/bb5349babbbc5938334da011717d9520","name":"S\u00e9rgio Martins","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/sergiomartins.pt\/v2\/wp-content\/uploads\/2020\/09\/frente-1.jpg","url":"https:\/\/sergiomartins.pt\/v2\/wp-content\/uploads\/2020\/09\/frente-1.jpg","contentUrl":"https:\/\/sergiomartins.pt\/v2\/wp-content\/uploads\/2020\/09\/frente-1.jpg","width":820,"height":1024,"caption":"S\u00e9rgio Martins"},"logo":{"@id":"https:\/\/sergiomartins.pt\/v2\/wp-content\/uploads\/2020\/09\/frente-1.jpg"},"description":"S\u00e9rgio Daniel Almeida Martins (Nogueira do Cravo, Oliveira de Azem\u00e9is, 22 de Setembro de 1985) \u00e9 um realizador e escritor portugu\u00eas. Al\u00e9m desta actividade, \u00e9 formador em diversas escolas, nomeadamente na Academia de Design e Cal\u00e7ado e na Associa\u00e7\u00e3o do Porto de Paralisia Cerebral, tendo tamb\u00e9m j\u00e1 passado por escolas como Centro de Forma\u00e7\u00e3o Profissional da Ind\u00fastria Electr\u00f3nica, Energia, Telecomunica\u00e7\u00f5es e Tecnologias da Informa\u00e7\u00e3o ou Universidade de Tr\u00e1s-os-Montes e Alto Douro","sameAs":["http:\/\/sergiomartins.pt","https:\/\/www.facebook.com\/sdamartins","sergiomartins.pt","https:\/\/x.com\/xgaizkax"]},false]}},"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/sergiomartins.pt\/v2\/wp-json\/wp\/v2\/posts\/1319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sergiomartins.pt\/v2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sergiomartins.pt\/v2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sergiomartins.pt\/v2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sergiomartins.pt\/v2\/wp-json\/wp\/v2\/comments?post=1319"}],"version-history":[{"count":1,"href":"https:\/\/sergiomartins.pt\/v2\/wp-json\/wp\/v2\/posts\/1319\/revisions"}],"predecessor-version":[{"id":1320,"href":"https:\/\/sergiomartins.pt\/v2\/wp-json\/wp\/v2\/posts\/1319\/revisions\/1320"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sergiomartins.pt\/v2\/wp-json\/wp\/v2\/media\/1321"}],"wp:attachment":[{"href":"https:\/\/sergiomartins.pt\/v2\/wp-json\/wp\/v2\/media?parent=1319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sergiomartins.pt\/v2\/wp-json\/wp\/v2\/categories?post=1319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sergiomartins.pt\/v2\/wp-json\/wp\/v2\/tags?post=1319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}