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

Will write a better guide with instructions for users to learn more about Google Fonts, including those who haven't used 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

I am preparing an in depth tutorial for the same :smiley:

Sure

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

1 Like

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>

image

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.

1 Like

:loudspeaker: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: New Block

LoadFontsMenuBlock

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

:page_facing_up: 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

Thanks for your suggestion @TIMAI2

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

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

Regards
Sarthak Gupta

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

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

image

Best wishes.

Thanks for the appreciation

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

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

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

1 Like

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

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.

Yes :grin: GFont automates all of this process

Dear @techxsarthak, your explanation was already pretty clear at the first post :grin:
My comments were just related to @S4IL grumble :rofl: :rofl: :rofl:
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 ! :muscle:

1 Like

Where does the font file get downloaded to, which folder location ?

:grin: Yup

You know binary :thinking: Thats cool

Totally agreed

1 Like

Fonts are stored in the "DownloadedFonts" directory inside the device's external storage. The exact path is:

/storage/emulated/0/DownloadedFonts/

Each downloaded font file is saved in this folder with its respective filename.

Did you like the font menu :grin:

Just ran a time test on a full loaded html file (calling and displaying all 1800 fonts)
Took 2-3 seconds on my computer, hardwired internet.

fontviewer.html.txt (181.6 KB)

no doubt with some caching in place, this could be quicker

This is great but new fonts are added daily, so I think the approach of using api for fetching fonts is better
Moreover the font search and sort that I added make it quite easy to look for the font one needs

I was just interested to see how long it would take, answer not that long to be a annoyance.

That's great. Did you test the sort and search

Yes, only DateAdded seemed to work for Sort, otherwise just returns alphabetical listing. Search works well.

1 Like