Adding Fonts

As promised, here’s stupid question number one (although my earlier posts may have counted, so I won’t keep track!).
I did search the forum for “fonts” but didn’t find anything that addressed my question.
In Knowledge Base it says .TTF fonts can be added when using Font Manager but when I choose Local fonts and go to my Font Library, the .TTF fonts are greyed out…
I checked fonts with Font Book and I have a few so-called web fonts - they’re open type TrueType… but they don’t show up either. I am obviously missing something simple about fonts, and any help would be appreciated!

Try and open the folder that contains the fonts you wish to use, not just the single font file. Best to only use max. 2 different fonts for your site, so please don’t import a folder that contains 30 or 40 fonts :wink:

1 Like

They need to added from a folder somewhere on your hard drive like you see in the screenshot. You really want Woff, Woff2 and TTF for browser compatibility.

1 Like

As @pumpkin says, it isn’t usuall to select an individual font. Instead you would select a folder that contains all the variants of the font family. However, if you you open a font folder and actually click on the open button, it will still load the fonts even though you won’t be able to select them individually. You won’t see them until you close and reopen blocs.

1 Like

Many thanks for the replies and help!
First I clicked a folder in the system library - System / Library / Fonts / Supplementary.

That was a mistake, it crashed Blocs and created a very large error report!
I’ve been using Macs for many years and haven’t really done much with fonts before (apart from adding) and I guess the crash was telling me not to mess with system fonts! :grin:

I then went to the fonts folder in the User Library and just clicked the button with the folder selected.
That was probably a little mistake too as it added each font one by one. That took a lot of clicks!

For some reason my fonts aren’t grouped into family folders, they’re all individual in one folder.

I think I’ll need to remove them from Blocs and sort fonts I actually want to use into sub-folders.

Thanks again! :beers:

Or use Google fonts, they’re pretty easy to get along with.

2 Likes

@Geoff You really need to be using web fonts and stay well away from anything system related. Find a place on your computer for web fonts and store them like any other graphic resources. Using Google fonts that link to Google is probably on dangerous ground for GDPR because it passes the user’s IP number without prior consent, but no problems if you download them and then self-host.

I’ve just checked and at time of writing I have 3140 fonts available for web usage. Many of those are simply different versions of the same font like bold or italic etc, however there are 181 separate fonts on standby for web usage and all verified for commercial usage.

This was becoming a challenge to curate, so I recently spent a few evenings sorting them out in an asset manager, complete with sample images, licence information, pairing suggestions and tags for suitable usage e.g luxury, fashion, branding and the rest.

If you are only building one or two sites you can keep all of this pretty simple and only need install a few in Blocs. For more regular use building a varied and well organised system for font selection is a major advantage.

1 Like

If you want to use fonts from your system, but they are not well organised. Open the FontBook app in your mac. Select a collection (they are normally organised into collections) and choose File / Export Collection from the file menu. You can then choose a folder for the exported files (create a folder on the desktop to make life easy). All the fonts will then be exported and will be contained within their own font family folders. For example. If I export the Modern Collection:

The fonts will be displayed in the save location like this:

You will now be able to add individual fonts into blocs by selecting the appropriate folder.

There is nothing intrinsically wrong with serving up your own fonts other than file size. Just make sure the font license allows you to use in websites. The one advantage of serving your own fonts is that they will always be available and you don’t have to worry about GDPR requirements when fonts are downloaded from third party servers such as Google.

1 Like

Great, thank you all, really useful advice!

@Flashman, I have various formats of TTF on my Mac:
Truetype (Mac)
Truetype (PC)
Truetype Collection
Opentype (Truetype flavoured)

Are any better than others, or all useable on the web, given the rights issues?

In practice web browsers are going to be using Woff or Woff2 most of the time.

https://caniuse.com/#feat=woff

https://caniuse.com/#search=woff2

Blocs will automatically load the fastest font that the browser understands, so in 95% of cases that will be Woff2 assuming you have included it. Chances are that if a browser doesn’t support Woff or Woff2 it isn’t worth bothering about.

To that extent TTF is an afterthought, yet still worth including, however you can forget about Eot and SVG entirely, since these are effectively deprecated. Support for Eot and SVG in Blocs could probably be dropped without issue, since any browser requiring those formats probably cannot open a Blocs site anyway.

TTF or OTF are what you will use primarily for desktop usage. OTF is arguably superior to TTF for certain purposes, since it allows for more advanced typesetting features, however I believe it comes with various caveats for web usage and you should avoid it in this context. If I import of a folder containing OTF Blocs appears to ignore it. https://help.blocsapp.com/knowledge-base/font-manager/

I cannot recall the last time I had a problem viewing a TTF or OTF font on a Mac, unless it was corrupted, so I am guessing it is not a problem if they are tagged as Mac or PC. I am buying fonts all the time and they all seem to work. N.B If you only have an OTF file it can be converted to TTF, Woff and Woff2.

Regardless of the format you should carefully verify they are permitted for commercial web usage and don’t just assume something is the case because you found it online and apparently free. Double check.

3 Likes

Good info, thanks very much.