Importar Fontes Externas

Item: Importar Fontes Externas
Rating: 1

por ShadouS 16.02.18 20:47

Detalhes da questão

Endereço do fórum: http://www.ultrapokedex.forumeiros.com
Versão do fórum: ModernBB

Descrição

Olá pessoas!

Gostaria de tirar uma dúvida um pouco complexa de se responder, talvez não, mas queria saber se para importar uma fonte externa, por exemplo a fonte do logo Pokémon, eu colocaria o código de importação na tag do cabeçalho do template overall_header do meu fórum?

Para assim quando eu colocasse o nome da fonte com a propriedade "font-family" em algum lugar do mesmo, eu pudesse fazer o uso dela...

Se eu quisesse usar uma fonte externa, eu importaria de qual maneira?
(Simplificando minha pergunta)

por Luiz 16.02.18 20:55

Olá,

Acesse o diretório de fontes da Google, selecione uma fonte, e nos dê o nome dela para que possamos prosseguir.

Cole também, neste tópico, o conteúdo de seu template overall_header.

Ficarei no aguardo. o/

---

Tópico movido de 'Questões sobre códigos' para 'Questões sobre a aparência do fórum'.

por virus 17.02.18 0:00

Olá, pode usar no css se me engano.
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Obs: Se tiver dificuldade e só dizer que ajudamos beleza.

Fonte pokemon:
https://www.dafont.com/pokemon.font

Há fontes em outros site como https://typekit.com/

Gerador de web fonte
https://www.fontsquirrel.com/tools/webfont-generator

Procure saber um pouco mais sobre o uso de fontes em websites. Geralmente são usadas em photoshop e etc até aonde eu sei.. As fontes mais comuns são usadas do google fonts e outros serviços. Assim como deve ter cuidado ao usar uma imagem deve ter cuidado com fontes acredito..

Também achei interessante em compartilhar este
https://fontmeme.com/pt/fonte-de-pokemon/

Importar Fontes Externas Cd36ae23683ccd8f298bcc80283a70fc

Importar Fontes Externas Cd36ae23683ccd8f298bcc80283a70fc

por ShadouS 17.02.18 0:46

Olá amigos!

Me desculpem, mas a minha pergunta é sobre qual maneira eu poderia importar uma fonte. Local de aplicação e como aplicar....

Luiz escreveu:Olá,

Acesse o diretório de fontes da Google, selecione uma fonte, e nos dê o nome dela para que possamos prosseguir.

Cole também, neste tópico, o conteúdo de seu template overall_header.

Ficarei no aguardo. o/

---

Tópico movido de 'Questões sobre códigos' para 'Questões sobre a aparência do fórum'.

Neste caso, eu aplicaria em qual parte do overall_header?

virus escreveu:Olá, pode usar no css se me engano.
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Obs: Se tiver dificuldade e só dizer que ajudamos beleza.

Fonte pokemon:
https://www.dafont.com/pokemon.font

Há fontes em outros site como https://typekit.com/

Gerador de web fonte
https://www.fontsquirrel.com/tools/webfont-generator

Procure saber um pouco mais sobre o uso de fontes em websites. Geralmente são usadas em photoshop e etc até aonde eu sei.. As fontes mais comuns são usadas do google fonts e outros serviços. Assim como deve ter cuidado ao usar uma imagem deve ter cuidado com fontes acredito..

Também achei interessante em compartilhar este
https://fontmeme.com/pt/fonte-de-pokemon/

Não estou querendo importar tal fonte, mas foi um exemplo para explicarem como importar uma fonte para meu fórum.... Uma explicação completa... Onde coloca o código de importação, qual parte desse lugar é colocado... etc. ..

Então, qual parte do overall_header eu colocaria o código de importação da fonte?
Lembro que era em uma tag chamada <head>, algo assim...

por virus 17.02.18 1:00

Ai

Achei um site bacana que oferece hospedagem gratuita e tem sua fonte acredito que sim Piscada

http://www.fontsaddict.com/font/search/pokemon

Se tiver a que você quer e só abrir a página e procurar esse espaço que tem o código que e necessário para colocar na folha de estilos do seu fórum

http://prntscr.com/ifvx8n

Então é só fazer a chamada da fonte conforme o nome

Exemplo

Código:: h1 { font-family: "Pokemon Normal"; }

Se ajudei deixa um like e tem um tutorial em baixo para caso queira hospedar em uma host própria, porém e mais complicado.

METODO IMPORT HOST:

por ShadouS 17.02.18 7:07

virus escreveu:Ai
Achei um site bacana que oferece hospedagem gratuita e tem sua fonte acredito que sim
http://www.fontsaddict.com/font/search/pokemon

Se tiver a que você quer e só abrir a página e procurar esse espaço que tem o código que e necessário para colocar na folha de estilos do seu fórum

http://prntscr.com/ifvx8n

Então é só fazer a chamada da fonte conforme o nome

Exemplo

Código:
h1 { font-family: "Pokemon Normal"; }

Se ajudei deixa um like e tem um tutorial em baixo para caso queira hospedar em uma host própria, porém e mais complicado.

METODO IMPORT HOST:

Pelo que entendi... é só usar aquele código do @font-face em meu css e o @import para usar uma fonte externa? huh

Tudo na folha de css?

por virus 17.02.18 16:54

Resumidamente se não quiser usar o import e só usar o fontface (NA FOLHA DE ESTILOS DO FÓRUM)e apontar o link do arquivo da font que está em uma host externa.

Um exemplo

Código:: @font-face { font-family: 'pokemonhollow'; src: url('https://codebe0.neocities.org/font/pokemonhollow.ttf'); } body, html { font-family: 'pokemonhollow'; }

Importar Fontes Externas -sgKc3fLSDWj1JMvvp_YUQ

Pode testar o código acima, um dos problemas que vai enfrentar é o
Access-Control-Allow-Origin que aparecerá no seu console...

Aqui vai falar como habilitar isto
https://enable-cors.org/server.html

Quando você testar o código acima ele simplesmente não vai funcionar por causa do cors
se quiser ver o resultado terá que instalar isto no google chrome https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Ele vai adicionar a regra para habilitar o uso, porém só quem tiver a extensão vai ver a fonte funcionando.

Para todo mundo ver sem precisar da extensão será necessário habilitar pelo link lá em cima que ensina como habilitar e os servers se me engano depende da hospedagem e só ver as informações que saberá o que a host utiliza e assim poderá continuar...

Não posso explicar mais do que isso e por que não conheço muito desse espaço ainda, mas ja da pra entender um pouco o por que não funciona as fonts.

Lembrando que hospedagens sempre são problemáticas em todo tipo de coisa, digo especialmente em limites e isso não é muito bom para quem não conhece os problemas que pode ter. Na hora de utilizar a fonte em seu fórum eu recomendo que utilize mais de uma fonte caso esta não carregar por exemplo

Código:: body, html { font-family: 'pokemonhollow', sans-serif; }

depois do pokemon pode ver que eu chamo todas as fontes não serifadas que estão no computador local da pessoa, então não haverá problemas. Também e possível fazer chamadas de fontes mais especificas como arial e outras.

Código:: body, html { font-family: 'pokemonhollow', Arial, sans-serif; }

E caso a pessoa não tenha essa fonte instalada no computador o mesmo vai procurar fontes sans-serif. Há também outros tipos de fontes como cursive e monospace.

por ShadouS 17.02.18 19:11

Meu amigo, não respondeu a minha pergunta... Estão fazendo muito rodeio, a pergunta é sobre em qual local eu coloco os códigos da maneira mais simples... Sem essas coisas de servidores ou plugins. ..

ShadouS escreveu:... é só usar aquele código do @font-face em meu css e o @import para usar uma fonte externa? huh Tudo na folha de css?

Essa foi minha pergunta sobre a maneira de usar o Font-face... que não foi respondida.
Tirando a pergunta principal do começo do tópico que também não foi respondida sem rodeios... :/

*sigh*

Vamos recomeçar... Usando o font-face e o import em meu css, vou conseguir utilizar uma fonte externa onde todos possam visualizar a mesma? Só me respondam essa pergunta, sem outros métodos mais complexos por favor...

por virus 17.02.18 20:21

A melhor maneira de fazer e usando imagem invés de fontes.

R: Muito provável que não funcione por causa do cors que eu mesmo disse no comentário lá em cima. O @import e para chamar a folha de estilo externa que utiliza @font dentro dele e aqui está um exemplo para qual o motivo usaria o import em sua folha de estilo do fórum -> https://codebe0.neocities.org/font/stylesheet.css

Esse arquivo stylesheet.css externa utiliza o @font-face para apontar os arquivos presente no servidor do link que são as fonts chamadas pokemon_solid-webfont.woff e pokemon_solid-webfont.woff2 e assim poderá criar uma conexão entre o fórum e a host externa..

O @import foi usado para economizar linha de seu css.

@font-face não fica na sua folha de estilo css do seu fórum, mas se quiser utilizar e só ver o exemplo do comentário anterior que mostra como se chama o arquivo usando @font-face na sua folha de estilo css do fórum.

Nota: A proposta do site é boa, mas parece que não está funcionando 100%
http://www.fontsaddict.com/

por ShadouS 19.02.18 3:22

Certo, finalmente entendi... Obrigado ^-^

Desculpem a lerdeza. .. Mas eu entendo melhor quando respondem mais diretamente Rindo

Podem fechar o tópico Feliz

por Alex 19.02.18 11:04

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.

Importar Fontes Externas