Trick: Using Google Fonts at design time

General questions about NeoAppBuilder - our rapid application development tool for building HTML5, web and mobile apps.

Moderator: Neosoft Support

Locked
User avatar
luishp
Posts: 410
Joined: Wed May 23, 2007 10:17 am
Location: Spain
Contact:

Trick: Using Google Fonts at design time

Post by luishp »

NeoAppBuilder can be enhanced with a bunch of Font Families from Google fonts (https://www.google.com/fonts), but it is a bit tricky.
In this video I show the most easy way I have found:

Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
Neosoft Support
NeoSoft Team
Posts: 5628
Joined: Thu Mar 31, 2005 10:48 pm
Location: Oregon, USA
Contact:

Re: Trick: Using Google Fonts at design time

Post by Neosoft Support »

The fonts require an Internet connection since they are hosted by Google. For mobile apps where you may not have Internet access, is it possible to download the font and access it locally?
NeoSoft Support
djmarkes
Posts: 193
Joined: Thu May 26, 2011 5:08 pm

Re: Trick: Using Google Fonts at design time

Post by djmarkes »

Google fonts use .woff2 extension.

Maybe he can convert this format .ttf using this web site:

https://everythingfonts.com/woff2-to-ttf

In the CSS video, you should edit it to read from the source location.
Diseño gráfico y Web profesional
http://www.jm-style.net
User avatar
luishp
Posts: 410
Joined: Wed May 23, 2007 10:17 am
Location: Spain
Contact:

Re: Trick: Using Google Fonts at design time

Post by luishp »

In fact it is even easier.
Please, take a look here:

http://www.labnol.org/software/google-f ... ter/19780/

Another interesting link regarding how to combine Google Fonts:

http://www.labnol.org/internet/best-goo ... ons/28987/
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
Posts: 410
Joined: Wed May 23, 2007 10:17 am
Location: Spain
Contact:

Re: Trick: Using Google Fonts at design time

Post by luishp »

An easier way to add Google Fonts at design time:

Add a container object and right click on it to edit HTML property.
Add this code:

Code: Select all

<style>
@import url(https://fonts.googleapis.com/css?family=Raleway);
</style>
Change "Raleway" for whatever font you want.

Some more complex samples:

Code: Select all

<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed:400,700');
@import url(https://fonts.googleapis.com/css?family=Roboto:100,700;);
@import url(https://fonts.googleapis.com/css?family=Poppins:300,700);
</style>
Numbers at the end of each line of code are font weights.
For font names with spaces, substitute every space with a "+" character.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
Locked