Follow

Just working on the Google Fonts alternatives page.

-Does anyone know a good tutorial on using system fonts on a website?

-Also, can you recommend a website for downloading free open licensed fonts?

Just to make clear, I'm looking for tutorials I can link to which tell people how to use system fonts on their website.

@switchingsocial@mastodon.at CSS will use system fonts when they exist and are listed in font-family. For example, font-family: Roboto; will use the system's font if available. Otherwise, it falls back to the browser's default font or if a @font-face is available for it, it downloads and uses it (and uses the default font in the meantime)

@switchingsocial
Why?
You can't guarantee a user will have a certain font installed. Far better to provide a particular font from your own domain. You can even provide the Google fonts in this manner. There are websites specifically explaining how to do this.

You should also provide generic fallbacks (e.g. sans serif) in case the user doesn't download fonts.

@fitheach

The page will have self-hosted fonts listed as the main alternative, and system fonts listed below that.

@switchingsocial Like this CSS rule? font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, 'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

@bane

They don't match switching.social's target audience.

Pleroma and Misskey don't have onboarding for non-tech people.

@matrix07012 @switchingsocial Now pleroma, it's design is old twitter look, more smooth since it can even run on a pi, you don't need to be a tech expert to make a server and docs to teach how to are easy tbh, It's not like it was GNU Social.
@switchingsocial
Didn't say it was, but it does makes pleroma better. also who knows someone that does not know shit about tech reading that might even try and setup one on its own. It's to switch normal social media, that's the idea of the website no ? Lmao
@matrix07012

@switchingsocial For using *specifically* system fonts, you can just specify the general font type in the site's CSS. For example, you'd use:
font-family: sans-serif;

Instead of:
font-family: Arial;

A lot of good web designers will use system fonts as fallbacks in case the specific font doesn't load. That would be something like this:
font-family: 'Arial', sans-serif;

If Arial doesn't load, whatever sans serif font the user prefers or whatever is default will be used.

As for downloading open source fonts, you can actually get anything on Google Fonts using this wonderful site.
google-webfonts-helper.herokua

All of mine are from there. You search for the font, choose what weights/styles you want, whether you only want to support modern browsers or if older ones are important. You download a zip archive that you simply unzip and it gives you copy/paste CSS for importing the font files!

@switchingsocial fontsquirrel.com/ maybe? They have license filters, at least; I'm not sure which you're looking for exactly.

@switchingsocial

Most Google Fonts use a free licence, so you could just download and self host them. It's easily possible with this project:

github.com/majodev/google-webf

Or as ready to use webapp:

google-webfonts-helper.herokua

@switchingsocial

What a number of people have already answered: choose your fonts, check the licences and host them on your own site (otherwise if it's not Google it's just someone else doing the tracking).

Google fonts are offered under an open licence, and so will be most (not necessarily all) fonts installed on your #Linux system. That's were you want to start looking for fonts.

@jeybe @rysiek

@switchingsocial I did not see these in your mentions (hope this is what you're looking for)

League of Moveable Type: theleagueofmoveabletype.com/

Velvetyne: velvetyne.fr/fonts/sporting-gr

These are both open source font foundries.

@switchingsocial Sorry, I meant to link to Velvetyne's home page: velvetyne.fr/

Not the page for Sporting Grotesque (which is a beautiful font, IMO). 😁

@switchingsocial

Believe it or not, w3schools' page on css fonts is old enough (pre-cross-browser font embedding) that it's relevant here:

w3schools.com/cssref/css_websa

Basically make sure designers use the fallback mechanism, include fonts from the major platforms, and include a fallback to the generic serif, sans-serif or monospace category.

(I used to regularly use font-family: Arial, Helvetica, sans-serif)

Sign in to participate in the conversation
Mastodon

mastodon.at is a microblogging site that federates with most instances on the Fediverse.