Best Fonts for Websites, Google Fonts Alternative

If you’re looking for modern and unique webfonts that make your brand stand out, Mojomox fonts are Google Fonts’ best alternative.

What is Google Fonts for Websites?

Google Fonts is an online font library that lets you embed free, open-source fonts on your website. Google fonts can be downloaded and installed on a computer. With that, the installed fonts can be accessed by a layout or text program to create designs or to type text in a specific font.

Google Fonts: Best Typefaces and More Unique Alternatives

Google Fonts’ best sans serifs trending in 2021 are:

• Roboto
• Zen Kaku Gothic Antique
• Open Sans
• Lato
• Montserrat
• Source Sans Pro
• Poppins
• Noto Sans
• Raleway
• Ubuntu

Google Fonts’ best trending serifs in 2021 are:

• Zen Antique Soft
• Zen Old Mincho
• Zen Antique
• Roboto Slab
• Merriweather
• Playfair Display
• Lora
• Noto Serif Display
• PT Serif
• Noto Serif

3 Font Aspects to Consider

There are three aspects to consider when thinking about fonts for a website, also called webfonts, and how to use them on a website, a computer, a phone, or in an app you’re developing:

1. Are we using system fonts or custom fonts?
2. When using custom fonts, should they be purchased or free?
3. Are we using self-hosted or cloud-hosted fonts?

What Are System Fonts?

System fonts are the fonts that are installed on your computer. They vary from computer to computer, or from phone to phone. An Android phone has different fonts installed than an iPhone, a Windows computer has different fonts than a Mac. There are about two handfuls of system fonts that are considered “safe webfonts,” fonts to use on a website that are installed and therefore viewable on most devices.

Well-known examples of system fonts are Arial / Helvetica and Times New Roman / Times.

System fonts come with each device and don’t require any licensing or purchasing.

Purchased vs. Free Custom Fonts

Google fonts is the largest platform for free, open-source fonts that can be downloaded and used on websites via Google’s cloud hosting.

Most newer Google fonts are high in quality and require minimal effort to be used on a website. Other free fonts are usually self-hosted. Free fonts can be low in quality, their spacing and kerning is not done well which makes them harder to read.

More people use the same font when it’s free. The core of branding is to stand out among other brands. Selecting a more unique font for your company branding helps customers identify your brand.

Unique fonts are available directly on font studios’ websites or on font platforms that have a larger font catalog to choose from. Font platforms often simplify the licensing but take a cut from the font designer.

Self-Hosted vs. Cloud-Hosted Fonts & Website Font Formats

Self-hosted fonts vs. cloud-hosted fonts (sometimes just called “hosted fonts”): Most custom fonts are meant to be self hosted, meaning you download the font files from the place that sells fonts and upload them into a folder where you store your other website assets such as images. These font files usually come in four formats: WOFF2, WOFF, TTF, and EOT. Developed by Google, WOFF2 is the smallest format in file size (read: fastest to load).

Both WOFF2 and WOFF are for modern browsers such as Safari on an iPhone, or Chrome on a newer computer. TTF and EOT are meant for older browsers such as Internet Explorer 8. If you need to embed all four formats depends on what browsers your users are using and if showing your content in the same font is important to you. If a font format cannot be displayed, a computer, a phone, or any other device, will default to a system font.

Modern font sellers don’t offer older formats any longer because they require too much development time for the value they’re providing.

Another way of looking at it is that users with old browsers probably don’t appreciate the additional design considerations of showing your website copy in a more unique font. In fact, the extra website loading time a unique font adds might even be a downside in this case.

How to Use Cloud-Hosted Fonts on A Website

Cloud-hosted font solutions make it easier to use custom webfonts. You only add a line of code to the header file of your website and then you can display your website copy in that font and its included, specific weights via CSS.

There are not many cloud-hosted solutions available yet. Google Fonts offers free, open source fonts while other cloud-hosted services such as Mojomox Font Studio offer a small but more unique and modern selection of best fonts for a website for a small subscription fee.

Example of how to use custom, cloud-hosted fonts on your website:

Stylesheet (add the following line of code to the header of your site):

<link rel="stylesheet" href="https://mojomox.com/fonts/bauhaus-geo/v1/BauhausGeoExVF?custId=[SUBSCRIBE_FOR_CUSTOMER_KEY]">

Once the stylesheet is added, use it directly as inline CSS:

<p style="font-family: BauhausGeoExVF">Text goes here</p>

… or in a CSS class (any font weight between 100 to 900 works):

.bauhaus { font-family: BauhausGeoExVF; font-weight: 100; }

Summary: Advantages of Using Cloud-Hosted, Custom Webfonts

• No hosting
• No complicated licensing
• Easier workflow for development and production sites
• If fonts are variable, they load faster
• Ongoing font optimization and updates are included
• Specifically for Mojomox fonts: all fonts are built with the same font parameters so that they mix and match with ease