Adding LOCAL Fonts instead of browser Google Fonts - tricky questions: speed? SEO? different „historic versions“ of fonts problematic?

I Need Help
1

Hello gals and guys :grinning: :wave:

After having been a bit hesitant to use Blocs for quite some time, as a now officially EX Adobe Muse user, I’m finally now really learning Blocs… and I learn HOW much it has evolved since I last had a closer look. :wink:

I have to say: quite impressive, @Norm! :smiley:

I hope you can help me here, as I have some tricky questions regarding adding local fonts.
It’s not about the process itself, which is well described here…
https://help.blocsapp.com/knowledge-base/font-manager/#adding-new-local-web-fonts
…but some problems around that topic of local fonts.

aim:

adding the (free) Font „Ubuntu“ as local font

(to avoid having GDPR issues with browser Google Fonts)

The Ubuntu Font can be downloaded here

a) from the original source

or

b)

from Google

problem:

The CREATION DATES of the years of the font variations from Ubuntu-project and Google do differ.

Ubuntu-project (2011, 2015, 2018)

Google (all font variations 2010)

So, I assume these are different versions in the history of the font.

If I understood correctly, different historic versions of fonts may cause problems.

???

I am NO expert on that, so I hope someone here knows that?

=>

questions:

should I

a) use the more current version from the original source, i.e. the Ubuntu project itself

or

b) the older version, that Google is offering for download

???

Well, Google browser fonts do work, so maybe they have a reason for offering the older font version für download…???

Yes, a complicated question and not really a blocs-thingy… however, if you could give any advice here, I would be very thankful indeed ! :slight_smile:

Regarding all the other recommended file formats :

The offered download format is always just .ttf so where do you have your fonts converted?

The knowledge-base says:

„For optimum browser support, we recommend that the web font is provided in the following file formats .woff , .woff2 , .ttf , .eot and .svg .“

I found this converter website:

Do you see that as a trustworthy source? Other tips?

I haven’t tested it all the way through with a living project, but just ran a conversion from .ttf to all the demanded other formats.

What I find quite hefty is the FILE SIZE that has to be uploaded:

for example just one font variation weighs 1,2 MB and this is JUST for .svg alone. :astonished:

Thus I wonder, how much these local fonts would slow down a website?

If the effect on speed is too bad , and thus on SEO (!!!) then it would be wiser to spare the extra work :beach_umbrella: and just add in browser Google fonts :link:.

But the thing is, that those cookie consent regulations are getting more difficult all the time and browser Google fonts are discussed as being problematic… :see_no_evil:

After this novella, I’m curious to hear your wisdom and well, maybe I even brought some valuable insights with my questions for some here. :wink:

I will be happy to help others with answers as soon as I’m a bit wiser and better with Blocs than I am now… :slight_smile:

Thanks in advance ! :pray:

2

Sometimes fonts have minor revisions and updates but that doesn’t mean the older version won’t work, merely that they thought it could be improved, so I would go for the most recent version.

There are various places you can convert fonts online e.g https://onlinefontconverter.com but I prefer using a terrific little free app called Fontplop for drag & drop conversions. Don’t worry about .eot and .svg, which are effectively deprecated. The ones you need are .woff, .woff2 and .ttf.

Local fonts are likely to be faster than fonts linking to Google because they are already on the site and no need for a callout to an external service. You are also likely to avoid faux rendering with that awkward flash before the styling kicks in. Furthermore if you enable the preload feature external callouts can block a site from loading entirely.

I always load fonts this way from the server and never have a problem, plus it gets around all the cookie nonsense, script blockers and GDPR etc. Always make sure when using fonts that they are licensed for commercial usage. In practice that means Google fonts most of the time or purchased premium fonts. I literally have hundreds installed in Blocs.

N.B You only need to download and install the weights you actually need. You can also download fonts safely at Font Squirrel.

2 Likes
3

I have had a good experience with this link:
https://google-webfonts-helper.herokuapp.com/

2 Likes
4

Thanks for the link. An alternative I use for Google fonts is through Skyfonts, which then sits in the menu bar. Download Google Fonts - Fonts.com | Fonts.com

5

Thank you Flashman for the Skyfonts alternative. Just a quickie, when installing fonts it ask for a font provider and lists 3. Which is the best of the 3 from your experience?

スクリーンショット 2020-06-11 04.22.11
スクリーンショット 2020-06-11 04.22.11914×914 185 KB

Thanking you,
Sabina

6

I’ve only tried this through fonts.com and it seems to work well. After creating a free account there you add that in the settings of the Sky fonts app. Now go to that page in the link above and browse for fonts, then click the button to download what you want with the option to download an entire family of fonts in one click.

Once downloaded they will appear in a list of your fonts and you can search for them from the menu bar. The fonts are downloaded to a special folder for Sky fonts and you can find them by right clicking inside your list of fonts to show the downloaded font file in the folder.

These are downloaded as desktop fonts, so I copy/paste them to another folder and then convert them to web fonts for use with Blocs.

7

Many thanks.

Sabina

8

Hi,
is there a description how to add google fonts local in blocs?
tom

9

HI @tom2, simply download your font(s) from google or any other site and follow the instructions explained here:
https://help.blocsapp.com/knowledge-base/font-manager/

1 Like
10

hi @Jerry
thank you. Don’t put a ccs or something ?

https://google-webfonts-helper.herokuapp.com/fonts/alef?subsets=latin

Here I read something from css?

11

Blocs will ignore any CSS files and just make use of the fonts. You can leave a CSS file in the web font folder or delete it as you prefer.

1 Like
12

ok, cool. That sounds great …
thanks

13

Thank you @Flashman for the very good explanations!

regarding the converter app „Fontplop“:

I stupidly did not download it, when you recommended it and now the link doesnt work anymore.

I did find it on GitHub, but I’m not familiar with that and don’t know if it would be safe to download the app from there (and actually I would not even not HOW to download it there, as it looks so complicated).

Or is there a better source to get Fontplop?

Are there any other recommended converter tools like Fontplop? it would be absolutely fine if they’d have to be bought.

Thank you in advance :slight_smile:

14

I’m using https://transfonter.org but there’s lots of them around.

1 Like
15

Thank you @Jerry :slight_smile:
Do you just use the standard settings when using transfonter?
It looks a bit complicated to me… :roll_eyes:

Font Converter - transfonter.org
Font Converter - transfonter.org1702×1226 146 KB

16

Yeah, don’t touch anything except for selecting the font format you need. i.e .TTF, WOFF2 etc.

17

It very much seems like development has stopped. This was a free app that would have been worth paying for to keep going. If you go to the link below I believe you can still download the DMG called “fontplop-1.3.0.dmg”

I’ve been using this for a few years and it ran fine through Mojave, then I had to allow it under Catalina in the security settings. When I installed Big Sur it was still OK and I find it far more convenient than online converters.

I have looked numerous times for good alternatives to fontplop and so far found nothing.

1 Like