HTML Fonte do documento HTML estabelecida não consta a original

Ronaldo Ávila · 17 de março de 2021

Olá pessoal, estou desenvolvendo um site HTML e preciso da fonte "ITC Officina Serif" no corpo do site. O problema é que quando eu defino font-family o site carrega e consta como ITC Officina Serif, porém não é a fonte que eu quero, o modelo não é o mesmo.

exemplo:

<h2 style="font-family: ITC Officina Serif">TESTE__ 00111 </h2>

Porém eu já tentei baixar a fonte e importar localmente no HTML e mesmo assim não consigo. Em um site com essa fonte ela original é assim:

Já tentei de tudo, inclusive trocar de navegador.

Rui Guilherme · 18 de março de 2021

Por se tratar de uma fonte paga fica complexo poder te ajudar trabalhando diretamente com ela... Você realmente precisa passar a font no atributo style do html? Eu recomendo passar pelo CSS:

HTML:

<h2>Suspendisse vitae feliz lectus. Cras erat est, aliquet eget consectetur sed, auctor sit amet ipsum. Vivamus nibh ante, venenatis at placerat quis, luctus sit amet mi. Praesent sit amet eros purus. Quisque eleifend neque ut lacus molestie vulputate. Nam ornare porttitor rhoncus. Cras vitae nisl non tellus faucibus efficitur at in nulla. Nam est erat, gravida sit amet tellus in, mollis facilisis tortor. Proin mauris magna, ullamcorper ut sagittis vel, tristique eu velit. Etiam efficitur in tellus quis aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id dignissim enim. Sed in suscipit urna, nec consectetur nisi. </h2>

<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis sit amet mauris pulvinar iaculis. Sed id risus vel dui fringilla accumsan. Vivamus nibh nunc, condimentum nec elit nec, consequat imperdiet ligula. Etiam non fermentum mi. Duis condimentum neque dictum nisi faucibus, et imperdiet odio vulputate. Aliquam erat volutpat. Proin bibendum maximus lorem sit amet imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum non nisl nec dui gravida vestibulum finibus non lacus.</small>

<p>Proin quis sem ac turpis auctor volutpat. Duis consequat tincidunt mauris ac dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra, tellus in convallis euismod, ex ex finibus risus, id viverra quam ipsum nec feliz. Suspendisse efficitur tempus porta. Aliquam nec nibh diam. Sed at leo tristique, interdum lectus ut, viverra enim.</p>

<b>Duis nec dui vitae eros rhoncus pharetra vel sed tellus. Fusce non neque enim. Proin posuere risus et sem vehicula, eget consectetur massa consequat. Donec vitae tincidunt mi, eu dapibus dolor. Nunc in lacus vehicula, dapibus lacus ac, laoreet purus. Donec ac elit tempor, imperdiet enim auctor, scelerisque elit. Proin lacus lorem, sodales ut pulvinar at, blandit ac lectus. Pellentesque eu enim in metus facilisis lobortis in id nisi.</b><br /><br />

<i>Aliquam eu rhoncus mi. Quisque sit amet interdum velit. Etiam in massa condimentum, porta orci a, varius sem. Integer leo nibh, aliquam non eros id, euismod elementum sem. Integer tristique molestie accumsan. Nulla facilisi. Vestibulum elementum maximus arcu vel convallis. Aliquam finibus hendrerit nisl nec scelerisque. Nam aliquam ultrices hendrerit. Sed condimentum leo quam, id finibus massa pellentesque ac. Maecenas porta urna et urna rutrum convallis. Aliquam tempus ex sed congue hendrerit. Nam porta quis orci eget bibendum. Suspendisse vitae arcu ut erat pulvinar consectetur eu sit amet ex.</i>

Como a alteração é para ser em todo o corpo, eu apenas marquei todas as tags de texto que eu me lembro do HTML para usar a fonte específica.

CSS:

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

/* Vocẽ pode definir uma class ou id no h2 e passar ela aqui, exemplo: */
/* #idH2 { ... } */
/* ou */
/* .classeH2 { ... } */
body, p, label, div, li, span, h1, h2, h3, h4, h5, h6, strong, em, dt, dd, mark, ins, del, sup, sub, small, b, i {
  font-family: 'Source Sans Pro', sans-serif;
}