O Google Fonts é um site onde existem diversos tipos de fontes, desde as mais usadas até as menos conhecidas, nele você tem a opção de efetuar o download da fonte, ou até mesmo importar os links de cada fonte e utilizar dentro do seu site, sistema, ou até mesmo dentro do Scriptcase. Neste post estaremos ensinando como utilizar estas fontes dentro do Scriptcase de modo fácil e rápido, vamos lá:

1° Passo – Acesse o site Google Fonts: https://www.google.com/fonts

2° Passo – Escolha a fonte de seu interesse, e clique em “Quick-use”:
001

 

3° Passo – Escolha os tipos de fontes que deseja e marque a caixa de seleção:
002

 

4° Passo – Escolha o jeito que deseja colocar a fonte no seu site ou sistema, neste exemplo vamos utilizar a opção “@import”, desta forma estaremos pegando o código de importação para acrescentar dentro do CSS, portanto clique em @import e copie as duas linhas disponibilizadas:
003

Pronto, já temos o código de importação para utilizar dentro do scriptcase, então vamos acessá-lo.

Neste exemplo foi criado uma tela de controle com 3 campos texto e 1 imagem HTML, vamos abrir o evento onLoadAll.

 

5° Passo – Precisamos abrir as tags <style></style> para acrescentar o css, para isso:

?>
<style>
</style>
<?php

6° Passo – Vamos colar o código de importação do site Google Fonts:

?>
<style>
@import url(https://fonts.googleapis.com/css?family=Overlock);
</style>
<?php


7° Passo –  No título da aplicação que é onde vamos efetuar a modificação do estilo da fonte, vamos acrescentar uma tag <span> com uma classe antes do texto que será o título, assim (não esqueça de fechar a tag depois do título </span> ):
006

 

8° Passo – Voltando no evento onLoadAll, acrescente agora o código CSS que será responsável pelo troca do estilo da fonte:

?>
<style>
@import url(https://fonts.googleapis.com/css?family=Overlock);
span.font-cab {
font-family: 'Overlock', cursive;
}
</style>
<?php

Pronto, com essas alterações já teremos a alteração da fonte, agora você pode usar sua criatividade e alterar suas aplicações com fontes diferenciadas do google fonts e deixar seu site ou sistema com um layout mais atrativo.

Esta alteração foi feita para os campos também, vejam como ficou o resultado:
008

 

Dê uma chance ao Scriptcase e teste de graça por 20 dias, acesse nosso site www.scriptcase.com.br

Compartilhe este post

Você pode gostar de…

Te pagam pelo seu sistema ou pelo seu código?

Para todos aqueles que desenvolvem sistemas e softwares todos os dias durante o trabalho, você...

Mas afinal o que é Business Intelligence?

Com certeza você já deve ter ouvido sobre essa expressão, BI ou Business Intelligence, a questã...

Características importantes para um Desenvolvedor Web

Talvez em algum momento você já tenha se perguntado quais seriam as habilidades necessárias para...

Comente este post

Receba novos posts, ofertas e muito mais toda semana.

Usaremos as informações fornecidas para lhe enviar newsletter e ofertas especiais por email. Você pode cancelar a inscrição quando quiser, clicando em um link no rodapé de qualquer e-mail que receber de nós, ou entrando em contato conosco pelo e-mail sales@scriptcase.net. Saiba mais sobre nossa Polícia de Privacidade.