Google Fonts

Google Fonts es un sitio donde existen diversos tipos de fuentes, desde las más usadas hasta las menos conocidas, en él tienes la opción de descargar la fuente, o incluso importar los enlaces de cada fuente y utilizar dentro de tu sitio, sistema, o incluso dentro del scriptcase. En este post estaremos enseñando cómo utilizar estas fuentes dentro del scriptcase de manera fácil y rápida, vamos allá:

1° Paso – Accede al sitio web de Google Fonts: https://www.google.com/fonts

2° Paso – Elija la fuente de su interés, y haga clic en “Quick-use”:

3° Paso – Seleccione los tipos de fuentes que desee y marque la casilla de verificación:

4º Paso – Elija la forma en que desea colocar la fuente en su sitio o sistema, en este ejemplo vamos a utilizar la opción “@import”, de esta forma estaremos tomando el código de importación para añadir dentro del CSS, por lo que haga clic en @import y copie las dos líneas disponibles:

Listo, ya tenemos el código de importación para utilizar dentro del scriptcase, así que vamos a acceder a él.

En este ejemplo se creó una pantalla de control con 3 campos de texto y 1 imagen HTML, vamos a abrir el evento onLoadAll.

5° Passo – Necesitamos abrir las etiquetas <style></style> para añadir el css, para ello:

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

6° Passo – Vamos a pegar el código de importación del sitio web de Google Fonts:

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

7° Passo – En el título de la aplicación que es donde vamos a efectuar la modificación del estilo de la fuente, vamos a añadir una etiqueta <span> con una clase antes del texto que será el título, así (no olvide cerrar la etiqueta después del título </span> ):

8° Passo – Volver al evento onLoadAll, añada ahora el código CSS que será responsable del cambio del estilo de fuente:

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

Con estos cambios ya tendremos la alteración de la fuente, ahora usted puede usar su creatividad y cambiar sus aplicaciones con fuentes diferenciadas de google fonts y dejar su sitio o sistema con un diseño más atractivo.

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