Google Fonts | Scriptcase Blog - Development, Web Design, Sales and Digital Marketing

Google Fonts es una biblioteca donde existen una cantidad importante de fuentes desde estilos más clásicos hasta algunas modernas y atractivas podremos aplicar las mismas tanto para nuestros sitios web como para nuestros sistemas generadas con Scriptcase, una vez adentro del sitio tendremos la opción de descargar o importar el link para su uso online en nuestro sitemas. En este post detallaremos algunos concejos de como aplicarlo utilizando Scriptcase de una forma muy simple.

1° Paso – Entrae en Google Fonts: https://www.google.com/fonts

2° Paso – Seleccionar nuestra fuente preferida, y hacer click en “Quick-Use”:

google-fonts--img1

3° Paso – Elegir los tipos de fuente que deseas y marcar la el checkbox:

google-fonts--img2

4° Paso – Elegir como deseas colocar la fuente en nuestro sitio o sistema, en este ejemplo utilizaremos la opción “@import”, de esta forma estaremos integrando el código para agregar dentro de nuestro CSS, por lo tanto click en @import y copiar el código de importación y el código para aplicar la fuente “font-family: nombre de la fuente;” como se muestra en las imágenes a continuación.

google-fonts--img3

google-fonts--img4

Listo, tenemos el código de importación y el código para importar la fuente, ahora debemos utilizarlo dentro de nuestro Scriptcase.

En este ejemplo fue creado un menú, con un submenú con la opción de cabecera habilitada pero se puede aplicar en otros lados de nuestros sistemas y páginas.

Habilitando Google Fonts dentro la cabecera:
Dentro del evento “onApplicationInit” del menú, cerraremos php lo abriremos nuevamente, y abrimos un estilo CSS <style>, posteriormente una etiqueta <span> y la llamaremos de “titulo”, dentro del mismo incluiremos en este caso el atributo de la fuente, de la siguiente forma:

?>
<style>
span.titulo {
	font-family: 'Oswald', sans-serif;
	}	
</style>
<?php

Finalmente dentro de la cabecera podemos llamar a nuestro span en cada uno de los atributos de la siguiente forma:

<span class=’titulo’> TU TITULO </span>

google-fonts--img5

Para aplicarlo a las fuentes dentro del menú he preparado un video pues tenemos que explorar las clases (si te gusto dale like )

Codigo del Evento “onAplicationInit”

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

ul#css3menu1 a {
    display: block;
    vertical-align: middle;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-style: none;
    color: #AAAAAA;
    cursor: pointer;
    padding: 23px 18px 26px;
    background-repeat: repeat;

}	
ul#css3menu1 ul a {
    text-align: left;
    padding: 8px 15px;
    background-color: #3F3F3F;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #4A4A4A;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #AAAAAA;
}

</style>

<style>
span.titulo {
	font-family: 'Oswald', sans-serif;
	}
</style>
<?php

Listo, con estas modificaciones ya hemos aplicado Google Fonts a nuestro proyecto de Scriptcase, obteniendo en unos simples pasos resultados muy atractivos:

google-fonts--img6

Puedes usar tu creatividad para hacer otras modificaciones avanzadas utilizando CSS, puedes aprender y ver más ejemplos en: http://www.w3schools.com/css/

Prueba el trial gratis por 20 días de Scriptcase y crea excelentes sistemas web, descárgalo hoy mismo de: http://www.scriptcase.net/

Tambien te puede interesar

Alternativa a visual basic

Scriptcase es la mejor alternativa a Microsoft Visual Basic. Si vienes programando con VB ó VB ...

Alternativa a phprunner, phpmaker

En el mundo de desarrollo PHP, los desarrolladores tienen ventajas sobre otros desarrollado...

Alternativa ASP.Net

ASP.NET es un entorno para aplicaciones web desarrollado y comercializado por ...

Comentar este post

Reciba los nuevos post, novedades y ofertas!

Ingresa tu e-mail para recibir orientaciones y asistencia técnica durante el período de evaluación, además de comunicaciones como novedades y ofertas especiales de Scriptcase. Tu información será utilizada de acuerdo con nuestra política de privacidad. Puedes optar por no participar en cualquier momento