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…

Tendências de desenvolvimento web para 2017

Você verá neste post tendências para 2017 em Web Design, no meio Digital e em Desenvolvimento. Me...

Importando a biblioteca Bootstrap para dentro do Scriptcase

Neste artigo, mostraremos um exemplo prático de como tornar a biblioteca Bootstrap disponível no...

Usando as macros sc_redir e sc_apl_conf

Macro no Scriptcase é algo parecido a criação de funções na linguagem de programação PHP, na...

Comente este post

Receba novos posts, ofertas e muito mais toda semana.