Google Fonts

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”:

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

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:

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> ):

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