Source language: Translate to:

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

Trick: Using Google Fonts at design time

Postby luishp » Sun Jan 03, 2016 11:53 pm

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
User avatar
luishp
 
Posts: 382
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Trick: Using Google Fonts at design time

Postby Neosoft Support » Mon Jan 04, 2016 11:40 am

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
Neosoft Support
NeoSoft Team
 
Posts: 5621
Joined: Thu Mar 31, 2005 10:48 pm
Location: Oregon, USA

Re: Trick: Using Google Fonts at design time

Postby djmarkes » Mon Jan 04, 2016 1:13 pm

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
djmarkes
 
Posts: 191
Joined: Thu May 26, 2011 5:08 pm

Re: Trick: Using Google Fonts at design time

Postby luishp » Mon Jan 04, 2016 1:51 pm

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: 382
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Trick: Using Google Fonts at design time

Postby luishp » Thu Mar 15, 2018 11:34 pm

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
User avatar
luishp
 
Posts: 382
Joined: Wed May 23, 2007 10:17 am
Location: Spain


Return to General NeoAppBuilder Discussion

Who is online

Users browsing this forum: No registered users and 1 guest