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

Você pode gostar de…

Criando um Site Gerenciável com Habemus e Scriptcase – Parte I

Criando um site gerenciável com Habemus e Scriptcase. Hoje iremos tirar o site do Habemus colocar n...

Deep Data: Descobrindo Informações Críticas para seu Negócio

O Deep Learning pode dá origem a algo chamado Deep Data. Descubra sua criticidade no seu negócio e...

Implementando reCAPTCHA do Google no Scriptcase

Aprenda a implementar o reCAPTCHA, a API do Google para o famoso "EU NÃO SOU ROBÔ", no Scriptcase....

Comente este post

Receba novos posts, ofertas e muito mais toda semana.