[FREE] 🔥 GFont Extension: Google Fonts for AI2 apps

[techxsarthak]

GFont: Apply Google Fonts to components dynamically

Introduction

Hello Everyone! Today I am presenting my GFont extension. The extension enables you to apply google fonts directly to components without adding them in the app assets while coding

Blocks

Events:

GotFonts

Triggered when fonts are fetched

FontDownloadSuccess

Triggered when font download is successful

FontDownloadFail

Triggered when font download fails

GotFontUrl

Triggered when the font URL is retrieved

FontAppliedSuccessfully

Triggered when the font is successfully applied to the component.

FontApplyFailed

Triggered when there is an error applying the font.

Methods:

QueryFonts

Fetches fonts based on given parameters

DownloadFont

Downloads a font from the given URL and saves it automatically

ExtractJSONValue

Extract a specific value from the JSON response

GetFontUrl

Fetches the font URL for a specific weight

ApplyFont

Applies the font from the specified file path to the given component.

Example Block arrangement

Support the Development

I'm a 16 year old high school student, I like to create and maintain many extensions. I research a lot daily to bring something new to App Inventor
While my primary goal and perspective on App Inventor is not to earn money, it really helps and motivates me a lot if you could spare some donations.
It takes a lot of effort to build one such extension. If you it for being Free
Please support the development by making a contribution here. It will make my day!

Sarthak Gupta is Coding

Download the Extension

Latest version

io.gfont.aix v1.1(108.2 KB) - Added Font Selector Menu

Past Releases

io.gfont.aix v1 (104.9 KB) - Initial Release of the extension

Rate the extension

Reply with any doubt and I will be happy to answer
Regards
Sarthak Gupta (@techxsarthak)

[techxsarthak]

@TIMAI2

Google Fonts Getter/Setter (ref )

Thanks @timai2 for the idea. Hope the extension stands as per your expectations.
Please share your opinion on it after testing it.

[TIMAI2]

Basics not working for me in companion app? Believe to be the DownloadFont method.

Suggestions

1. Return a simple fontList of each font name (family), not the whole json ?
2. Generate an html to view fonts in webviewer prior to download?
3. provide guidance for block elements (e.g. in GetfontUrl: subset? category? fontweight? - sometimes this is regular and not 400

[techxsarthak]

@TIMAI2

Basics not working for me in companion app? Believe to be the DownloadFont method.

Yes the download font method works only when you build the apk

@TIMAI2

Return a simple fontList of each font name (family), not the whole json ?

@techxsarthak

Extract JSON value Function

Sample Json
{"id":"chatcmpl-7ceff50a-a5f1","object":"chat.completion","created":
1736604854,"model": "llama3-8b-8192","choices":
[{"index":0,"message":{"role":"assistant","content":"Hello! It's nice to meet you. Is there something I can help you with or would you like to chat?"},"logprobs":null,"finish_reason":"stop"}],"usage": {"queue_time":0.017792521000000002,"prompt_tokens":
11,"prompt_time":0.001729597,"completion_tokens": 25,"completion_time":0.020833333,"total_tokens":
36,"total_time":0.02256293},"system_fin
gerprint":"fp_a9","x_groq": {"id":"req_01jhavea"}}

• choices[0].message.content : Get content of message sent by assistant
• choices[0].finish_reason: Get the reason for the stop of the generation
• model : Get the model name
• usage.queue_time : Get the queue time
• usage.prompt_tokens : Get the prompt tokens
• usage.completion_rokens : Get the completion tokens

Yes, I thought about that but I think it will limit the possibilities of the extension. I have already incorporated JsonExtract block from my GroqText extension that extracts value using field path.

@TIMAI2

provide guidance for block elements (e.g. in GetfontUrl: subset? category? fontweight? - sometimes this is regular and not 400

family: Name of a font family.

subset: Name of a font subset.

category: serif | sans-serif | monospace | display | handwriting

capability: VF | WOFF2.

sort: alpha | date | popularity | style | trending.

@TIMAI2

Generate an html to view fonts in webviewer prior to download?

Noted for next update

Regards
Sarthak Gupta

[TIMAI2]

@techxsarthak

Yes the download font method works only when you build the apk

Works fine if I use the web component instead in companion.

@techxsarthak

subset: Name of a font subset.

for example ?

@techxsarthak

capability: VF | WOFF2.

not included in blocks ? but appears to present ttf as opposed to woff2

[TIMAI2]

@techxsarthak

Please share your opinion on it after testing it.

It is a good start, but leaves much to be desired for a user coming to it without any prior knowledge of Google Fonts.

A font viewer is probably an essential, otherwise users would need to go out to "Google Fonts" to see what a font looks like, before returning to app to fetch it.

Some guidance / lniks on how to get the api key would also help

Add more detailed descriptions for your methods

[techxsarthak]

@TIMAI2

Works fine if I use the web component instead in companion.

Yes, I mentioned that the method currently supports only fully built app. Will add companion support in the next update.

@TIMAI2

not included in blocks ? but appears to present ttf as opposed to woff2

I thought ttf would work better as compared to woff2

[techxsarthak]

@TIMAI2

for example ?

  {
    "family": "Antic",
    "variants": [
      "regular"
    ],
    "subsets": [
      "latin"
    ],
    "version": "v19",
    "lastModified": "2022-09-22",

Latin as here

[techxsarthak]

@TIMAI2

It is a good start, but leaves much to be desired for a user coming to it without any prior knowledge of Google Fonts.

Will write a better guide with instructions for users to learn more about Google Fonts, including those who haven't used it

@TIMAI2

A font viewer is probably an essential, otherwise users would need to go out to "Google Fonts" to see what a font looks like, before returning to app to fetch it.

Actually I thought that most of the users of the extension would be well versed with Google Fonts site and fonts which they want to add, this is interesting, will definitely work for it

@TIMAI2

Some guidance / lniks on how to get the api key would also help

I am preparing an in depth tutorial for the same

@TIMAI2

Add more detailed descriptions for your methods

Sure

[S4IL]

BRUH!!! I spent like 4 hours making smth like this with no extensions and like a week later you make an extension! This would have helped so much... bruhhh, anyways cool extension

[TIMAI2]

The html file might look something like this:

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<style>
body {
font-size: 22px;
}
</style>
</head>
<body>

<div id="font"></div>
<h1 style="font-family: 'Sofia';" onClick="selectFont(innerText)">Sofia</h1>
<h1 style="font-family: 'Comfortaa';" onClick="selectFont(innerText)">Comfortaa</h1>
<h1 style="font-family: 'Roboto';" onClick="selectFont(innerText)">Roboto</h1>

<script>

function selectFont(value) {
if (window.AppInventor) {
  window.AppInventor.setWebViewString(value);
}
else {
document.getElementById("font").innerHTML = value;
}
}
</script>

</body>
</html>

Might take a while for 1800 fonts to load up !!

The webviewstring changed event can be used to return the selected font to the app.

[techxsarthak]

Release Notes: Version 1.1

What's new

1. Added Font Selector page, as suggested by @TIMAI2
2. Fixed some minor bugs to improve performance

Preview

New Block

WebViewer : The webviewer in which you want to display the Font Selector Menu
ApiKey : Google Fonts API Key

Example Blocks

Make sure to ask for storage access permission or turn it on from the settings for the extension to work optimally

Download Link is updated at the top

[techxsarthak]

Thanks for your suggestion @TIMAI2

@TIMAI2

Might take a while for 1800 fonts to load up !!

Yes, So I added logic to load all the fonts json from the api first then load them 50 at a time.

@TIMAI2

The webviewstring changed event can be used to return the selected font to the app.

Yes, that's a great idea
I also added Sort and search options to find your favourite font!

Regards
Sarthak Gupta

[uskiara]

Dear @S4IL,
this new extension (great job ) allows you to use google fonts without pre-loading them in the asset, but there was already another one that you can find here:

MyFonts → use your own custom fonts (a modified version of @Ken's YourFont extension)

Here is a modified version of @Ken's extension "YourFont". YourFont doesn't work with Companion (on devices with Android > 9) since the AI2 nb184 release. See also here: Error in YourFont Extension - #20 by Anke

Example - blocks

<a class="lightbox" href="https://community.appinventor.mit.edu/uploads/default/original/3X/7/9/7977aef944f00002214f6a1c45a342b8d890ac86.png" data-download-href="https://community.appinventor.mit.edu/uploads/default/7977aef944f00002214f6a1…

which allowed you to use "custom" fonts, for example .ttf uploaded as resource in the app's asset dir.

Best wishes.

[techxsarthak]

@uskiara

new extension (great job )

Thanks for the appreciation

@uskiara

there was already another one that you can find here:

Here is a modified version of @Ken's extension "YourFont". YourFont doesn't work with Companion (on devices with Android > 9) since the AI2 nb184 release. See also here: Error in YourFont Extension - #20 by Anke Example - blocks<a class="lightbox" href="https://community.appinventor.mit.edu/uploads/default/original/3X/7/9/7977aef944f00002214f6a1c45a342b8d890ac86.png" data-download-href="https://community.appinventor.mit.edu/uploads/default/7977aef944f00002214f6a1…

which allowed you to use "custom" fonts, for example .ttf uploaded as resource in the app's asset dir.

To explain this more specifically

MyFont allows you to set fonts from file locations, this means you have to store all the fonts that you are using in the storage.

GFont allows you to select from a world of fonts from Google Font's database and allows you to apply them directly. Thus eliminating the need of storing the fonts in the assets.

Regards
Sarthak Gupta

[TIMAI2]

@techxsarthak

MyFont allows you to set fonts from your assets

Not quite, if you use version 2 of MyFonts extension, you can set the font from most file locations

@uskiara

which allowed you to use "custom" fonts, for example .ttf uploaded as resource in the app's asset dir.

This is where the idea came from, if you read from here (post 27 - 54)

[S4IL]

Yes, that was what i used, and made my own API to get the ttf file of a font and my website that is the font picked, with costumwebview, and all this complicated process that took 4 hours was for nothing since this was made!
Here is an example call to the API: https://s4api.vercel.app/font_url?font_name=Roboto

[techxsarthak]

@TIMAI2

Not quite, if you use version 2 of MyFonts extension, you can set the font from most file locations

My fault, I wanted to say that myfont allows you to set font from most of the file locations while gfont extension fetches fonts from api and applies it at once. Thus eliminating the need to supply the font ttf file.

[techxsarthak]

@S4IL

Yes, that was what i used, and made my own API to get the ttf file of a font and my website that is the font picked, with costumwebview, and all this complicated process that took 4 hours was for nothing since this was made!

Yes GFont automates all of this process

[uskiara]

Dear @techxsarthak, your explanation was already pretty clear at the first post
My comments were just related to @S4IL grumble
Both of you are too clever for an "old" software developer who started more than 40 yeras ago to code, in machine language, embedded software for military aircraft....
Let me anyway tell you one hint: although you spend some hours in making an app working, that time is not wasted but invested. When the going gets tough, the toughs get going !