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

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

https://design.ubuntu.com/font/

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:

https://www.font-converter.net/en

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:

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.

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

2 Likes

Thanks for the link. An alternative I use for Google fonts is through Skyfonts, which then sits in the menu bar. https://www.fonts.com/web-fonts/google

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?


Thanking you,
Sabina

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.

Many thanks.

Sabina