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

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

Por ,

8 de junho de 2016

Compartilhar esta postagem

a

Você pode gostar também…

8 Dicas para você se tornar um programador melhor

Hoje viemos trazer aqui 8 dicas para você se tornar um programador melhor do que já é, conseguin...

9 Tendências de Desenvolvimento Web e TI para 2022

Confira neste artigo 9 importantes tendências de desenvolvimento web e TI que você deve ficar de ...

API: o que é e quais o Scriptcase tem disponíveis?

Entenda tudo sobre o que é uma API, pra que elas servem e exemplos de API's que já vem integradas...

Você pode gostar também…

Receba novas postagens, recursos, ofertas e muito mais a semanalmente.

Nós utilizaremos seu email para te adicionar a nossa Newsletter semanal. Você pode sair desta lista a qualquer momento clicando no link no final dos emails recebidos, ou entrar em contato conosco em vendas@scriptcase.com.br. Conheça nossa Política de Privacidade.