Fórum OpenCart Brasil

[witalovs]

E aí galera?

Como faço para colocar uma fonte personalizada no opencart?

E como faço para que os clientes/visitantes visualizem essa fonte no meu site se eles não tem a mesma instalada nos seus computadores?

Desde já, muito grato!!!

[jose_neto]

Amigo você vai ter que utilizar, CSS para fazer isso, usando
@font-face{
font-family:{ "nomedafonte";
src: url("fontes/nomedafonte.eot");
}
, e procurar algum site ou programa sugiro este microsoft WEFT http://www.microsoft.com/typography/WEFT.mspx para converter sua font para o formato .eot, depois de converter as fontes, elas devem estar na mesma pasta onde esta seu site, de preferencia em uma pasta fonte.

da uma lida deste link também http://www.maujor.com/tutorial/impfonte.php

valeu

[witalovs]

Obrigado @jose_neto!

Vou testar aqui viu cara!

Abraço!!!

[jose_neto]

De nada cara, qualquer coisa tamos ai!

[MARCDAT]

Olá pessoal,

Alguém poderia me informar como inserir no OC 1.5.3.1 o que segue abaixo:
----------------------------------------------
- @font-face CSS web font rule

In header of your document paste:

<style type="text/css">
@font-face{
font-family: "fauxsnow";
src: url('http://fontsforweb.com/public/fonts/618/fauxsnow.eot');
src: local("Faux Snow BRK"), url('http://fontsforweb.com/public/fonts/618/fauxsnow.ttf') format("truetype");
}
.fontsforweb_fontid_618 {
font-family: "fauxsnow";
}
</style>


Now to apply add this class to any element:

fontsforweb_fontid_618
---------------------------------------------
Preciso que essa regra funcione para que a fonte seja visualizada no site.

Muito obrigado,

[Manoel Vidal]

Olá,

Coloque o código abaixo na 1ª linha do arquivo stylesheet.css que fica no diretório /catalog/view/theme/SEU_TEMA/stylesheet/, segue a parte do código que você tem que utilizar:

Código: Selecionar todos

@font-face{
font-family: "fauxsnow";
src: url('http://fontsforweb.com/public/fonts/618/fauxsnow.eot');
src: local("Faux Snow BRK"), url('http://fontsforweb.com/public/fonts/618/fauxsnow.ttf') format("truetype");
}
.fontsforweb_fontid_618 {
font-family: "fauxsnow";
}

Depois você altera no mesmo arquivo a linha abaixo:

Código: Selecionar todos

font-family: Arial, Helvetica, sans-serif;

Para:

Código: Selecionar todos

font-family: 'fauxsnow', sans-serif;

Salve as alterações no arquivo, limpe o cache do seu navegador, e teste a loja.

Espero ter ajudado.

[witalovs]

Obrigado @Manoel Vidal pelas informações!

[Manoel Vidal]

Que bom que ajudou.

[wchavioli]

Manuel, me ajudou demais em um projeto que estou desenvolvendo.. Muito obrigado.

[wchavioli]

Manoel, embora sua explicação tenha sido meu ponto de partida para a utilização da font-face eu efetuei testes e não sei o por que, com algumas fontes só estava funcionando no Chrome portanto, para quem estiver com o mesmo problema que tive, segue abaixo o códg corrigido para funcionar nos outros navegadores:

Código: Selecionar todos

@font-face {
font-family:"CACPINAF";
src:url("http://fontsforweb.com/public/fonts/1375/CACPINAF.eot?") format("eot"),
url("http://fontsforweb.com/public/fonts/1375/CACPINAF.woff") format("woff"),
url("http://fontsforweb.com/public/fonts/1375/CACPINAF.ttf") format("truetype"),
url("CACPINAF.svg#CACPinafore") format("svg");
font-weight:normal;font-style:normal;
}

No caso acima utilizei uma fonte por url externa diretamente do fontsforweb.com, mas se preferir pode baixar a fonte nos formatos "ttf" "eot" e "woff" subir ao servidor e utilizar sua própria url.

Obs. Não esquecer de dar o comando css em cada bloco onde a fonte deverá ser exibida, conforme o exemplo acima o comando seria font-family: cacpinaf;
no caso "cacpinaf" é o nome da fonte que eu utilizei.

Grande abraço.