Google Fonts on Speckyboy Design Magazine https://speckyboy.com/topic/google-fonts/ Design News, Resources & Inspiration Fri, 22 Dec 2023 15:39:10 +0000 en-US hourly 1 25+ Best Free Serif Fonts for Creatives https://speckyboy.com/free-serif-fonts/ https://speckyboy.com/free-serif-fonts/#respond Mon, 18 Dec 2023 08:43:53 +0000 https://speckyboy.com/?p=156555 Explore our curated selection of elegant serif typefaces for your design projects. Download these fonts for free and enhance your typography game today!

The post 25+ Best Free Serif Fonts for Creatives appeared first on Speckyboy Design Magazine.

]]>
Serif fonts, those elegant and timeless typefaces, are the unsung heroes of the design world. They are like that dependable, creative friend who always makes an appearance at the right moment to add a touch of sophistication and readability to any design project.

Serif fonts have a rich history and have been around since the days of printing presses. Their timeless appeal and versatility have made them a staple in various design projects, from elegant invitations and formal documents to book covers and websites.

Their ability to convey trustworthiness, tradition, and readability has made serif fonts an essential tool in any designer’s toolbox. So, let’s explore the best free serif fonts that will elevate your design game.


What are Serif Fonts?

Serif fonts are defined by the small lines (or decorative features) that trail from the edges of each letter and number. As serif fonts are considered easy to read, they’re typically used in print design as the characters are clearer and more distinctive, making it much easier for us to process.

Like Slab Serifs, there are always exceptions to the rule. Most Serifs will work perfectly well as a title or headline on the web, and some, as you will see by the selection of serif fonts below, will even work beautifully as body text, but please do choose your web typography carefully.

The difference between sans-serif and serif fonts


The post 25+ Best Free Serif Fonts for Creatives appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-serif-fonts/feed/ 0
20+ Best Free Slab Serif Fonts for Creatives https://speckyboy.com/free-slab-serif-fonts/ https://speckyboy.com/free-slab-serif-fonts/#respond Wed, 13 Dec 2023 13:17:20 +0000 https://speckyboy.com/?p=156566 From logo design to packaging, explore the striking aesthetic and functional power of free slab serif fonts. Download them all!

The post 20+ Best Free Slab Serif Fonts for Creatives appeared first on Speckyboy Design Magazine.

]]>
Welcome to the world of slab serifs! Slab serif fonts are characterized by their robust and rectangular serifs, which give them a sturdy and no-nonsense appearance. They have a significance that goes beyond just aesthetics; they play a crucial role in design, conveying trustworthiness, strength, and reliability.

In typography, choosing the right font is like an artist choosing the perfect brush for a painting. It can make or break the impact of a design project. Slab serifs, with their strength and confidence, are often sought after by designers to create eye-catching headlines, striking logos, and impactful branding. Their versatility allows them to be used in various design applications, from posters and banners to websites and packaging.

In this article, we share some of the best free slab serif fonts for designers. Let’s explore these high-quality slab serif fonts that can elevate your designs without costing anything. Whether an experienced designer or just starting out on your creative journey, these fonts are here to empower your projects with a touch of timeless style and readability.


What is a Slab Serif Font?

A slab serif font is recognizable by its bold, robust appearance. It features thick, squared-off serifs with uniform stroke widths, minimal contrast, and a lack of curved lines.

They prioritize legibility and often have a geometric or mechanical feel. While maintaining a strong and solid look, they come in diverse styles to suit various design purposes.

Slab serif fonts are ideal for making a bold statement in your design projects where clarity and impact are essential.


The post 20+ Best Free Slab Serif Fonts for Creatives appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-slab-serif-fonts/feed/ 0
40+ Best Free Sans-Serif Fonts for Designers https://speckyboy.com/free-sans-serif-fonts/ https://speckyboy.com/free-sans-serif-fonts/#respond Thu, 07 Dec 2023 17:07:26 +0000 https://speckyboy.com/?p=156420 Find the perfect sans-serif font with this selection of free fonts. Create headlines that demand attention, body text that's readable, and stylish UI designs.

The post 40+ Best Free Sans-Serif Fonts for Designers appeared first on Speckyboy Design Magazine.

]]>
Font choice is about setting the right tone, conveying a message, and capturing attention. Among the various types of fonts available, sans-serifs have carved out a special place amongst designers. The simplicity of sans serif fonts gives them a modern and uncluttered feel, making them the go-to choice for many creatives looking to create a contemporary design.

In this collection, we share the best free sans-serif fonts available. It’s a treasure trove for those who are on the lookout for fonts that combine aesthetic appeal with functionality. From sleek and minimalist to bold and impactful, the range of sans-serif is surprisingly diverse.

You will find fonts perfect for headlines that demand attention, body text that needs to be readable, or UI designs that need a particular style. These fonts are not just beautiful; they’re also versatile and can adapt to various design contexts, from print to digital.

For freelancers, hobbyists, or seasoned professionals, this collection aims to provide those sans-serif fonts that can elevate any design project. Whether you’re designing a logo, a website, a mobile app, a presentation, or social media post, the right font can be a game-changer. So, let’s dive into the world of free sans-serif fonts and discover some hidden gems.


What are Sans-Serif Fonts?

Sans-serif fonts are known for their elegant and precise appearance. The key feature that sets them apart from serif fonts is the absence of small lines or strokes at the ends of the letters, known as ‘serifs.’

This lack of embellishment gives sans-serif fonts a simple and clean appearance. They are characterized by uniform line weight throughout the letters, making them highly legible.

This clarity is especially beneficial in digital media, where readability on screens is crucial. Designers often favor sans-serif fonts for their versatility and modern feel.

They are excellent for creating an impactful and uncluttered look in various design projects, from websites and logos to print materials. Their simplicity allows for easy pairing with other font styles, making sans-serif fonts a flexible choice for various design needs.

The difference between serif and sans-serif fonts


The Top Free Sans-Serif Fonts for Creatives

Fivo Sans Modern Display Font Family (Free)

Fivo is a contemporary font family that subtly elevates your designs. It comes in various weights, from bold to extra black, and quietly enhances typography.

Fivo Sans Modern Display Font Family Free Font Creatives Designers

Confine Sans-Serif Typeface

Confine is a bold sans-serif font with robust and striking characters. Step outside the ordinary and embrace the strength of Confine in your next brand design project.

Confine Sans-Serif Typeface Font Creatives Designers

Kelson Sans Font (Free)

The Kelson family offers nine free fonts with numerals, punctuation, and multilingual support so that you can truly use them across various projects. It’s perfect for readable web copy and headlines.

Sans Serif Free Font Designers Creatives Kelson

Bourbon Grotesque Font (Free)

Bourbon Grotesque melds a retro feel with a touch of modernity. As a free, all-caps font, its distinctive vintage charm is perfect for branding and logo design, embodying a timeless aesthetic that captivates and endures.

Bourbon Grotesque Font Free Font Creatives Designers

Rosity Modern Sans-Serif Typeface

Rosity is a sans-serif typeface that blends clean and crisp lines with a dash of sophistication. Tailored for contemporary design, it gives your typography an unspoken elegance, ensuring every word read has a subtle, modern charm.

Rosity Modern Sans-Serif Typeface Font Creatives Designers

Airone Extra-Bold Sans-Serif Font (Free)

Airone brings an undeniable punch to any design, offering a free, extra-bold sans-serif font that commands attention. Particularly perfect for titles and headlines, it underscores a strong, impactful presence, ensuring your text is not only readable but also memorably heavy-hitting.

Airone Extra-Bold Sans-Serif Font Free Font Creatives Designers

JUST Sans Minimal Typeface

JUST Sans’s clean and simple design makes it an excellent fit for a wide range of projects. If you’re committed to making thoughtful choices when it comes to fonts, this font deserves a spot in your font collection.

Font JUST Sans Clean Modern Minimal Geometric Typeface

Rostack Bold Heading Font

Rostack is a bold and condensed font with solid strokes and compact letterforms. Its compelling nature makes it perfect for headlines and titles or any design that needs a bold, consolidated style.

Rostack Bold Heading Font Creatives Designers

Nexa Sans-Serif Font Family (Free)

Nexa is a geometric sans-serif typeface family that offers plenty of options to make your next design stand out. Even though it’s bold, it’s perfectly legible, so it’s a good fit for the web, too.

Free Font Designers Creatives Nexa Sans-Serif Font Family

IBM Plex (Free)

IBM champions innovation and cosmopolitanism, so it’s not surprising to see their official font – IBM Plex – embodying the same values. This corporate serif typeface family has extensive multilingual support (including Arabic, Hebrew, and more). It works perfectly for tech projects – IBM Plex signals engineering perfection.

Sans Serif Free Font Designers Creatives IBM Plex

Faune Font Family (Free)

Designed for the French Centre National des Arts Plastiques, Faune is a wonderful typeface family that offers both sans-serif (Faune Text) and script (Faune Display) fonts. Both are incredibly vibrant and versatile, so they’re well-suited to various projects. Every Faune font sub-family offers three variants.

Sans Serif Free Font Designers Creatives Faune

Fira Sans Serif (Free)

Fira is what everyone has in mind when you mention an IT font. Fira embodies Mozilla Firefox’s characteristic open-source culture. You’ll get three weights with matching italics, as well as extensive multilingual support with special characters and a monospaced variant. Fira is perfect for web display.

Sans Serif Free Font Designers Creatives Fira Sans Serif

Alegreya Sans HT (Free)

Alegreya Sans HT incorporates humanist typography with modern readability requirements to provide a versatile sans-serif typeface family. You’ll get 28 fonts in the bundle, including extra bold and extra bold SC italic. There’s no doubt about it: it’s the whole package (with multilingual support)!

Sans Serif Free Font Designers Creatives Alegreya Sans HT

Peace Sans (Free)

Peace Sans is a font with a pacifist story to tell. Its curves make it incredibly friendly, and its legibility ensures that it works perfectly for small and large displays alike. It speaks different languages, too. You’ll get full glyph support for different alphabets and various special characters.

Sans Serif Free Font Designers Creatives Peace Sans

Mohave Sans Serif (Free)

Originally designed as an all-caps sans-serif typeface, Mohave has now transformed into a versatile font family. It currently offers four weights (light, regular, medium, and bold) with matching italics. The neutral character body shapes make the Mohave typeface perfect for a variety of branding materials, as well as web displays.

Sans Serif Free Font Designers Creatives Mohave Sans Serif

Neris Display (Free)

A beautiful sans-serif with special effects, Neris shines when used for display and shorter paragraphs. Neris avoids the typical sans-serif boredom and adds slanted lines, special curvature, and other elements that make it so engaging.

Sans Serif Free Font Designers Creatives Neris Display

Dense Sans Serif (Free)

If you want to make your designs more legible, condense them. Dense is a sans-serif typeface that does its job well. It comes in three weights (thin, regular, and bold). The bolder variant looks great on large displays, while thin and regular work perfectly for web copy. Multilingual support is included!

Sans Serif Free Font Designers Creatives Dense Sans Serif

Canter Sans Serif (Free)

Elegant (with a dramatic twist), Canter is a phenomenal sans-serif typeface choice for your next project. Bold lines and sharp turns work together to provide you with an outstanding font family. Canter offers six display types (including Canter 3D, shadow, and outline), perfect for headlines, posters, and other branding materials.

Sans Serif Free Font Designers Creatives Canter Sans Serif

Sabado Sans Serif (Free)

Modern and bold, Sabado is a sans-serif font family that will make your next display design look phenomenal. You’ll get two modern styles: Sabado regular and Sabado italic. You can’t go wrong with sans-serif, but give your standard style extra flair with Sabado!

Sans Serif Free Font Designers Creatives Sabado Sans Serif

Rhyder Sans Serif (Free)

Geometry is perfection, and Rhyder takes its cues from the beauty of nature. This geometrical sans-serif font is perfect for both display and text, and it offers plenty of powerful elements to work with. Every character is meticulously detailed, and you’ll get accents, numerals, and punctuation, as well.

Sans Serif Free Font Designers Creatives Rhyder Sans Serif

Langdon Sans Serif (Free)

Solid, serious, and stable. Langdon embodies all the right values, but it doesn’t forget to capture attention. It plays well with outlines and shadows for an extra dramatic effect when designing headlines and posters. In addition to regular characters, you’ll also get numerals, punctuation, and more.

Sans Serif Free Font Designers Creatives Langdon Sans Serif

Myra Sans Serif (Free)

Who says practical can’t be beautiful? Myra proves that sans-serifs can be just as striking as scripts. It plays with thin lines and rounded corners, the exaggerated swash being the cherry on top, to create a unique atmosphere. It’s perfect for web, print, apparel, and more!

Sans Serif Free Font Designers Creatives Myra Sans Serif

Adam Pro Sans Serif (Free)

Adam Pro is a sharp, clean sans-serif typeface inspired by the Futura font family. It comes with 228 character glyphs that will look beautiful on posters and other display formats. It’s an all-caps typeface with numerals and different weights. Adam Pro also offers certain special characters and accents.

Sans Serif Free Font Designers Creatives Adam Pro Sans Serif

Aileron Sans Serif (Free)

Futurism and humanism come together to form Aileron, a beautifully balanced sans-serif typeface inspired by the Neo-Grotesque design movement. Aileron has specific curvature that makes it look soft. With 16 different weight combinations with matching italics and bold variants, Aileron is an excellent asset for modern display and print designs.

Sans Serif Free Font Designers Creatives Aileron Sans Serif

Big John & Slim Joe Sans Serif (Free)

Different yet similar, Big John and Slim Joe are two sides of the same coin. Big John is a bold and beautiful version, while Slim Joe is thin and modern. Both fonts in the duo are all-caps sans serifs, and they play off of each other beautifully to emphasize contrasts.

Sans Serif Free Font Designers Creatives Big John Slim Joe Sans Serif

Moon Rounded Sans (Free)

Aim for the moon – even if you miss, you’ll land among the stars. The modern version is its namesake – this rounded sans-serif typeface. Moon has three distinct weights, uppercase and lowercase characters, numerals, and special characters for different languages. It’s an excellent choice!

Sans Serif Free Font Designers Creatives Moon Rounded Sans

Source Sans Pro (Free)

Source Sans Pro is Adobe’s first open-source typeface, and it’s perfect for user interface (UI) design. Inspired by the best sans-serif typefaces used today, Source doubles down on what works and offers extensive support for different languages and special characters. You’ll get 12 weights, too!

Sans Serif Free Font Designers Creatives Source Sans Pro

Maven Modern (Free)

Thin and elegant, Maven Modern is the perfect font collection for the 21st century. This particular set expands on the original Maven collection with three light fonts, including an ultra-thin hairline font. It’s an excellent choice for web display and text, as well as headlines and label design.

Sans Serif Free Font Designers Creatives Maven Modern

Intro Sans Serif (Free)

Intro is a sans-serif type collection that consists of 72 fonts. You can download four for free. This sans serif is incredibly playful yet modern and refined. It offers multilingual support and characters for Extended Latin and Cyrillic alphabets. It’s perfect for text and UI designs!

Sans Serif Free Font Designers Creatives Intro Sans Serif

Ostrich Sans (Free)

If you’re looking for a sans-serif that’s not like any other, take a look at Ostrich. This sans-serif font comes with a fantastic inline presentation, as well as special characters for different languages. You’ll also have your pick of weights, from dashed to heavy.

Sans Serif Free Font Designers Creatives Ostrich Sans

Cabin Sans Serif (Free)

There’s nothing like a humanist sans to reinforce your brand’s values. And when it comes to sans, Cabin is an excellent choice. This font offers an incredible weight range, as well as two options: roman and italic. Every rounded element is perfectly adjusted and adds personality.

Sans Serif Free Font Designers Creatives Cabin Sans Serif

HK Grotesk Sans Serif (Free)

A sans-serif typeface inspired by traditional Grotesque typography, HK Grotesk is an excellent choice for bold messaging. Its rounded characters radiate friendliness, and it works perfectly for both text and display. In addition to uppercase and lowercase letters, you’ll also get numerals, punctuation, and plenty of special characters.

Sans Serif Free Font Designers Creatives HK Grotesk Sans Serif

Qanelas Soft (Free)

Qanelas Soft creates such a soft atmosphere because of its rounded design. This sans-serif typeface offers 20 diverse weights, every single one of them friendly. It’s perfect for UI design, body copy, and other purposes. Qanelas may be versatile, but it has a striking personality.

Sans Serif Free Font Designers Creatives Qanelas Soft

Moderne Sans (Free)

Moderne plays with curvature and sharp lines to create a clean, albeit dynamic, typeface for your next project. Originally inspired by the Roaring 20s era typography, Moderne was adapted to modern trends and works for modern formats, posters, and other materials. It even comes with a few alternate characters!

Sans Serif Free Font Designers Creatives Moderne Sans

Blogger Sans (Free)

Designed for legibility and headlines, Blogger expanded to form a well-rounded sans-serif typeface with plenty of options. You’ll get four weights with matching italics, as well as alternates and stylistic sets for different alphabets (e.g., Cyrillic). With over 550 glyphs, you can’t go wrong with Blogger!

Sans Serif Free Font Designers Creatives Blogger Sans

Katahdin Round (Free)

Make a statement with Katahdin. It is a rounded, extremely modern sans-serif typeface that works perfectly in print and the web. Round corners make Katahdin friendly, and with multilingual support, it’s the whole package. If you are looking for a go-to font, you’ve found it!

Sans Serif Free Font Designers Creatives Katahdin Round

Rubik Sans Serif (Free)

Created for the Rubik’s Cube Exhibition in Jersey City, Rubik was expanded to include multilingual support (including Cyrillic and Hebrew characters). Today, it’s a free, well-rounded sans-serif font that can be used across projects. You’ll get five distinct weights with matching italics for personalization.

Sans Serif Free Font Designers Creatives Rubik Sans Serif

Relancer Display Typeface (Free)

If you’re nostalgic for the Art Deco era, you’re going to love the Relancer Display typeface. Relancer is an all-caps, sans-serif font with numerals (and limited punctuation options) included. Perfect geometry and pristine presentation come together to help you create elegant designs. Try it for free!

Sans Serif Free Font Designers Creatives Relancer Display Typeface

Overpass Sans Serif (Free)

Perfectly legible and made with UI design in mind, Overpass is an open-source font with plenty of options to make your next project look (and feel) amazing. You’ll get eight weights with italics and a monospace option for a retro feel. Your audience is going to love it!

Sans Serif Free Font Designers Creatives Overpass Sans Serif

Coves Sans Serif (Free)

Funky and fresh, Coves sans-serif comes with a full character range, from uppercase and lowercase to special characters and accents. Its simple, rounded edges interact with slanted lines to create a vibrant atmosphere beloved by modern and trendy brands. Coves sans-serif is free, so add it to your toolkit ASAP!

Sans Serif Free Font Designers Creatives Coves Sans Serif

Raleway Sans Serif (Free)

Originally designed as a thin font, Raleway has become a standard go-to font and expanded into a sans-serif font family. It currently offers nine weights with italics and a variable version. Stylistic alternates and discretionary ligatures make Raleway an incredibly elegant choice for the web.

Sans Serif Free Font Designers Creatives Raleway Sans Serif

Tips for Using Sans-Serif Fonts in Your Projects

Here are some handy tips for using sans-serif fonts in your design projects:

  • Keep it Balanced: Sans-serif fonts are known for their clean look. Use them to create a balanced design. Don’t overcrowd your design with too many different fonts. Stick to two or three at most.
  • Pairing Fonts: When combining sans-serif fonts with others, go for contrast. Pair a bold sans-serif font with a light serif font for headlines and body text. This creates an appealing visual difference.
  • Font Size Matters: For readability, especially on screens, make sure your font size is not too small. A good rule of thumb is 12-16 points for body text. Headlines can be larger to catch attention.
  • Spacing is Key: Proper line spacing makes text easier to read. A general guideline is to set line spacing at 120-150% of your font size. This gives enough room for letters to breathe without looking too spaced out.
  • Consistency Across Platforms: Make sure your sans-serif font looks good on different devices. Check how it displays on mobiles, tablets, and desktops to ensure a consistent look everywhere.
  • Color Contrast: Pay attention to the color of your font and background. High contrast, like black text on a white background, makes reading easier. Avoid colors that clash or are hard on the eyes.
  • Use for the Right Content: Sans-serif fonts are great for modern or minimalistic designs. They work well for tech, fashion, and young brands. Consider the context of your project when picking a font.

How to Install Fonts

Installing Fonts on Windows

  1. Download the Font: Download the font you want to install. Fonts are typically downloaded as compressed files (ZIP or RAR).
  2. Extract the Font: If the font file is compressed, extract it using built-in Windows tools or a third-party tool like 7-Zip.
  3. Install the Font: Once extracted, right-click on the font file (usually with a .ttf or .otf extension) and select Install. Your new font is now ready to use.

Installing Fonts on Mac

  1. Download & Extract the Font: If the font is compressed, double-click the file to extract it. Mac’s Archive Utility will handle the extraction.
  2. Install the Font: Double-click the font file. A preview window will appear with an Install Font button. Click the button to install and then you can use your new font.

Note on Font Licenses

Just because a font is free doesn’t always mean you can use it for anything. Some free fonts are only for personal use. Others are okay for commercial usage. The license may also say that you need to give credit to the font creator.

You can usually find the license on the website where you downloaded the font. Look for a section called ‘License’ or ‘Usage Rights.’

If you’re unsure about the license, it’s better to be safe and ask the creator or find a different font you know you can use for your project.

Remember, following the license rules is important. It respects the hard work of the designers who created these fonts for you and the community.

Conclusion

The sans-serif fonts you choose will depend on the project’s purpose and your creative vision. By selecting the right font, you can create designs that are aesthetically pleasing, easy to read, engaging, and ideally suited for their intended audience.

Having a variety of sans-serif fonts in your toolkit is imperative. They’re great for all types of designs, from websites to posters, because of their simple style. Each font has its own unique feel, so having a selection to choose from means you can find just the right one for your project.

So, go ahead and try these fonts out! Experiment with them in different designs. You might be surprised at how much they can add to your work. Remember, the right font can make your design look amazing. Happy designing!

The post 40+ Best Free Sans-Serif Fonts for Designers appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-sans-serif-fonts/feed/ 0
Exploring the 10 Most Popular Google Fonts https://speckyboy.com/most-popular-google-fonts/ https://speckyboy.com/most-popular-google-fonts/#respond Sat, 26 Aug 2023 21:51:04 +0000 https://speckyboy.com/?p=98587 What stands out about the most popular Google fonts is that they overwhelmingly show a professional attitude and knowledge towards typography.

The post Exploring the 10 Most Popular Google Fonts appeared first on Speckyboy Design Magazine.

]]>
The impact Google Fonts has had on the web is undeniable. Since its somewhat humble beginnings in 2010, the 1,500+ fonts now hosted by the library have been viewed well over 75 trillion times. Of course, the likes of Adobe and others have followed suit with font repositories of their own. The difference is that everything Google Fonts has to offer is free.

And it’s a good thing that free web fonts have come along. Typography on the web used to be incredibly boring. It started out with the limitation that a specific font had to be on a user’s system in order to be viewed correctly in a browser. Eventually, @font-face brought more options to the table. But licensing issues were often difficult to deal with (if dealt with at all).

The brilliance of Google Fonts is the flexibility you have with where and how you use it. You can load fonts via Google’s service or download them to place on your own server or device. Plus, they receive contributions from font artists worldwide. That has led to an incredible variety of available styles.

Of course, some fonts tend to be more popular than others. Thanks to the openness of the library, Google provides a nifty analytics page that breaks down how much usage each font receives. Let’s take a look at ten of the most used fonts in the library. Note that, in some cases, multiple members of the same font family are separate entries on Google’s list. We’ll avoid repeating ourselves in those instances.



Top Google Fonts for UI Designers

Open Sans by Steve Matteson

It’s probably not much of a surprise that Open Sans leads the way as you tend to see it all over the place. WordPress even used it as the default dashboard font at one point. It’s clean, easy-to-read and comes in an abundance of styles. The condensed version also ranks as one of Google’s more popular choices.

Open Sans Popular Google Font

Roboto by Christian Robertson

Again, we Google Fonts fanatics love our sans-serif type. This one is great for body text as it lends itself well to reading at smaller sizes. The look is also very modern and matches up nicely with more minimalist designs. It also saw a massive 65% jump in usage from February 2017-18. Also note that the condensed version is the sixth most-used font as well.

Roboto Popular Google Font

Lato by Łukasz Dziedzic

Did I mention the obsession with sans-serifs? Lato is one that I do find myself using a lot. As with its mates in the top three, it comes in a variety of styles and is a jack-of-all-trades. I think that helps to explain its popularity, along with the fact that it fits in with modern design trends.

Lato Popular Google Font

Slabo 27px by John Hudson

Finally, a serif in sight! What makes Slabo 27px a bit unique is that both it and its sister font (Slabo 13px) are optimized for viewing at the pixel size reflected in its name. This flavor is a great choice for producing clear, readable headlines.

Slabo 27px Popular Google Font

Oswald by Vernon Adams, Kalapi Gajjar and Cyreal

Many designers look for web fonts that resemble classics – but without the licensing hassles. Oswald is one that is pretty well on point with the popular Alternate Gothic family. It has that same timeless look that brings a touch of class to any website.

Oswald Popular Google Font

Source Sans 3 by Paul D. Hunt

This font is actually historic in that it’s Adobe’s first-ever open source typeface. Their intention was to create a font that would be a good fit for UI. It certainly does hold up as being very readable. There is a nice spacing between characters and plenty of styles to choose from.

Source Sans 3 Popular Google Font

Montserrat

Inspired by the Montserrat neighborhood of Buenos Aires, Argentina, this font sports a classic urban style. It’s a great all-purpose font that adds a bit of pizzazz to both headlines and body text. Its popularity has also led to the Alternates and Subrayada versions.

Montserrat Popular Google Font

PT Sans by ParaType

Created for the “Public Types of Russian Federation” project, Google reports that the majority of PT Sans’ usage is in Russia. In fact, it features character sets for every title language in the country. That being said, designers around the world are taking advantage of this font’s clean and modern look.

PT Sans Popular Google Font

Raleway by Matt McInerney, Pablo Impallari and Rodrigo Fuenzalida

Raleway was developed as a headline font meant to be used at larger sizes. However, it does work quite well for body text as well. Personally, I don’t know if any other font on this list fits the modern, minimalist style better. It’s also available in a dots version.

Raleway Popular Google Font

Lora by Cyreal

Rounding out the list is Lora, a subtly-detailed serif font. While it only comes in four basic styles, that seems to be more than enough for just about any use.

Lora Popular Google Font

Bringing Great Typography to the Web

What stands out about the fonts above is that they are overwhelmingly a reflection of their core audience: designers. While the library is undoubtedly used by non-designers as well, the choices at the top of the list seem to show a professional attitude towards type. Notice the lack of any comic or whimsical styles.

Overall, these fonts have brought about a typographic revolution to the web. That’s something we designers should all be thankful for.

The post Exploring the 10 Most Popular Google Fonts appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/most-popular-google-fonts/feed/ 0
The Easy Way to Host Google Fonts Locally https://speckyboy.com/easy-way-to-host-google-fonts-locally/ https://speckyboy.com/easy-way-to-host-google-fonts-locally/#respond Tue, 29 Mar 2022 07:00:40 +0000 https://speckyboy.com/?p=138353 If you are looking to host Google Fonts locally, we'll introduce you to a quick and easy way to implement them.

The post The Easy Way to Host Google Fonts Locally appeared first on Speckyboy Design Magazine.

]]>
With well over 1,250 free, open-source fonts, Google Fonts is an amazing resource for web designers. Virtually every typographic style is available here, and 135+ languages are represented.

Typically, these fonts are implemented via the Google Fonts API. Add a few code snippets to your website, call the fonts in your CSS, and call it a day. Easy, right? And the process can be even easier if you’re using a plugin or theme that lets you select fonts as you go.

But there are also compelling reasons to host Google Fonts locally on your web server. Privacy is one, as some jurisdictions have ruled that remote font hosting violates European GDPR laws.

Performance is another potential consideration. While there is some debate about local hosting vs. the Google Fonts API, the difference seems to be relatively small. The option of utilizing a content delivery network (CDN) is also a possibility.

If you’re looking to host Google Fonts locally, we’ll introduce you to an easy way to implement them. Seriously – you could be up and running within a few minutes!



First, Identify the Google Fonts You Want to Use

The first step in the process is to identify which Google Fonts you want to use in your project. Browse the official site and take note of the following:

  • The font name;
  • The style(s) you want to use;
  • The language(s) you need;

The Roboto font family on Google Fonts.

Now, you could download your selections directly from Google Fonts. And while there’s nothing wrong with this method, it can be a bit cumbersome.

To use the fonts on your website, you’d have to also call the locally-hosted files via @font-face in your CSS. That involves looking at Google’s source code for each font, then choosing the correct character set and changing the src attribute to match where your fonts are stored.

For example, if we want to use Roboto’s “light” style, the CSS looks like this (comments added/edited for clarity):

/* latin - is this the only character set we need? */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2'); /* Change to match your local font location */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; /* This isn't needed at all */
}

Perhaps it’s not the worst thing in the world. But if you have several fonts, each with multiple styles, this can become very tedious.

Add Fonts Using Google Webfonts Helper

Hosting your Google Fonts locally doesn’t have to be so complex. The google-webfonts-helper is a tool that makes the process incredibly smooth. It does all of the heavy lifting for you.

Before we start, take note: there may be version differences between google-webfonts-helper and Google Fonts itself. Google Fonts are improved over time. Not using the API means not always having the latest versions.

The Google webfonts helper home page.

To get started, search for the font(s) you want to use. Note that you can only work with one font at a time. The steps below will need to be repeated for each additional font.

In our case, we’ll find one of Google’s most popular fonts, Roboto, from the list.

The Roboto font family at Google webfonts helper.

Next, it’s time to select the character set (charset) and styles we need.

Selected character sets and font styles for Roboto.

Based on our character and style selections, google-webfonts-helper generates the necessary CSS. By default, the code aims to support as many browsers as possible. However, we can also choose to focus on modern browsers as well.

It even allows us to edit the base directory where we want to store the font files. This will be instantly reflected in the CSS.

CSS generated by Google webfonts helper.

With all of our settings now applied, a .ZIP archive is available to download. We’ll unzip the archive to the chosen destination and upload it to our web server.

The download button from Google webfonts helper.

Finally, we’ll paste the provided @font-face code into our CSS. Making note of the font-family attribute, we can add these fonts to whichever CSS selectors we’d like.

Serving Google Fonts Locally

With a few simple steps (and an assist from google-webfonts-helper), you can forego the Google Fonts API and host fonts locally. It not only improves user privacy but also helps to avoid potential complications from API downtime or performance bottlenecks.

That being said, locally hosted fonts do mean more work for your web server. Thus, it’s still important to utilize caching and other optimizations. These factors should be considered before you take the plunge.

Regardless of how you use Google Fonts, it’s nice to know that there are multiple ways of doing so. This allows you to choose the best method for your needs. And hosting them locally may be the right way to go.

The post The Easy Way to Host Google Fonts Locally appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/easy-way-to-host-google-fonts-locally/feed/ 0
Getting Started with Variable Fonts: Tips and Resources https://speckyboy.com/variable-fonts/ https://speckyboy.com/variable-fonts/#respond Sat, 01 May 2021 09:20:35 +0000 https://speckyboy.com/?p=102878 It is amazing to think of how far web typography has come. Back in the day, designers were relegated to just a few “web safe” choices. Today, we have access...

The post Getting Started with Variable Fonts: Tips and Resources appeared first on Speckyboy Design Magazine.

]]>
It is amazing to think of how far web typography has come. Back in the day, designers were relegated to just a few “web safe” choices. Today, we have access to a nearly endless array of fonts – including many that are available for free.

And now, we’ve come to the next big thing in typography: Variable fonts.



What Is a Variable Font and Why Is It Different?

Variable fonts are an extension of the OpenType specification. It enables a single font file to contain all manner of style variations.

Traditionally, we’ve needed a separate font file for each and every style variation. For example, take the Open Sans Google Font. There are currently 10 different styles available, each requiring the use of its own respective file:

Open Sans font styles

While we’re certainly used to this approach, it’s not the most efficient or convenient way to do things. For web designers, it makes us really scrutinize whether or not to use a particular style. Since each new file we call can affect page performance, we have to weigh the costs and benefits every time.

With variable fonts, we don’t need to relinquish specific styles to save on load time. Instead, we have access to everything in just one file. You almost wonder why we didn’t have them years ago.

But it’s also worth noting that there are other advantages. For one, these fonts can be used in CSS transitions, allowing for smooth animations between styles. They also enable designers to create their own custom styles – making them great for unique branding purposes.

Fit Variable Font

Things to Keep in Mind

While variable fonts are an exciting development, they’re not perfect for every use just yet. Before you dive in, think about the following:

Limited Browser Support
Variable fonts are supported in the latest versions of Chrome, Edge, Firefox and Safari. If that makes up the bulk of your target audience, great. If you still need to support older browsers, you’ll need a fallback of some sort.

Relatively Small Selection (For Now)
Since we’re at the beginning of the variable font revolution, there aren’t a ton of available options out there. But the spec has support from the likes of Google, Adobe, Microsoft and Apple – so it’s only a matter of time before we are inundated with choices.

The good news here is that, for a fairly new technology, there are surprisingly few downsides. It doesn’t appear that there will be any major roadblocks for widespread adoption to take place.

Font Playground testing tool

Resources

The design community is undoubtedly excited by the potential of variable fonts. Therefore, you’ll find lots of useful tutorials to get you started. In addition, there are already a few places where you can find fonts to start experimenting with.

Articles and Tutorials

Creating a Variable Font (Rainer Erich Scheichelbauer of Glyphs) View →
How to Use Variable Fonts on the Web (Anna Monus of Tuts+) View →
Introduction to variable fonts on the web (Mustafa Kurtuldu of Google) View →
One File, Many Options: Using Variable Fonts on the Web (Ollie Williams of CSS-Tricks) View →
Variable Fonts: making the promise a reality (Bob Taylor of Monotype) View →
Variable Fonts Are the Future of Web Type (Mandy Michael of Adobe) View →
Variable Fonts Are the Next Generation (Thomas Phinney of Communication Arts) View →
Variable fonts guide (MDN) View →
Variable Fonts on the Web Using CSS (Alligator.io) View →
Weird things variable fonts can do (Chris Coyier of CSS-Tricks) View →

Font Downloads and Tools

Amstelvar (David Berlow) View →
Axis-Praxis (Laurence Penney) View →
Decovar (David Berlow) View →
Fit Variable Font (David Jonathan Ross) View →
Font Playground (Wenting Zhang) View →
Gingham: A Free Variable Font (Christoph Koeberlin) View →
Google Fonts Early Access (Google, Various Authors) View →
Roboto Variable Font (Marc Foley & Dave Crossland) View →
V-Fonts (Nick Sherman) View →
variableFont.js (Monotype) View →

Time to Experiment

Variable fonts are one of the most exciting developments web typography has seen. They stand to both make our jobs easier and, even better, let us maximize our creativity. So, it makes sense to start experimenting now in order to see what they’re capable of.

What aspect of variable fonts excites you most? Have a favorite font? Leave a comment and let us know!

The post Getting Started with Variable Fonts: Tips and Resources appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/variable-fonts/feed/ 0
How to Speed up Google Fonts in WordPress https://speckyboy.com/speed-google-fonts-wordpress/ https://speckyboy.com/speed-google-fonts-wordpress/#comments Fri, 10 Apr 2020 10:49:04 +0000 https://speckyboy.com/?p=86422 In this quick tutorial, we show you a couple of methods for optimizing and drastically speeding up Google Fonts in WordPress.

The post How to Speed up Google Fonts in WordPress appeared first on Speckyboy Design Magazine.

]]>
Today, I’m going to cover a few methods for optimizing and speeding up Google Fonts in WordPress. Images, of course, are and always will be the heaviest part of a web page, but according to HTTP Archive, as of October 2016, web fonts are just over 3% of an average page’s overall weight.

Even though the weight of web fonts makes up only a small portion of the overall web page, every optimization you make helps contribute to faster load times. Check out some ways below to speed up those fonts!



What are Google Fonts?

First off, for those of you who might not know, Google Fonts is an open-source (free) directory of over 800 web font families which you can use on your website. They are also available to download locally for print and other uses. Millions of WordPress websites utilize Google Fonts as it is a great free way to enhance the look and usability of your site.

If you are going for pure performance, system fonts will always win, but there is nothing like the professionalism and aesthetic of a good web font. And in fact, typography has been shown to affect conversions in a positive way. But everything has its cost. And so, it is important to understand how adding Google Fonts to your WordPress site affects speed and performance.

How to Use Google Fonts in WordPress

There are a couple of ways to add Google Fonts to your WordPress site. The first and default way is to grab them directly from Google. This method uses their global CDN to deliver the fonts quickly from different servers from around the globe.

When you add them to your site there will be an external request to fonts.googleapis.com.

googleapis

The are also external requests to fonts.gstatic.com for the WOFF or WOFF2 versions depending upon browser support.

gstatic

WordPress Plugin

If you are a WordPress beginner, the easiest way to add Google Fonts to your website is probably with a free plugin. The Easy Google Fonts plugin is a good popular example. As of writing, it currently has over 300,000 active installs with a 4.9 out of 5-star rating.

easy google fonts wordpress

Add Embed Code From Google Fonts

It is important to note that most WordPress plugins add slight overhead, and so I prefer to add Google Fonts with their much simpler to use embed code. So, head over to Google Fonts and choose the font you want. For this example, I’m using Roboto.

Click on the “Customize” option. This is an important step as each font family has different font weights. Typically you will want regular, medium, and bold.

Note: Every font-weight you include adds to the overall load time of your fonts, so don’t just select all of them. The less, the better.

4 roboto google fonts

Then click on the “Embed” option. This is where you will want to copy the embed code it provides.

google fonts embed

Take that code and put it into the <head> section of your WordPress site. There are different ways you can do this, some might prefer to enqueue the fonts, but for this example I simply added the code to the header.php file. Note: This might vary slightly depending on the theme you are using.

header font embed

Then, to actually make your WordPress theme use the Google Fonts, you have to add some CSS styles. Below is an example of what I’m using. If your theme admin panel doesn’t have a custom CSS editor you can always use a free plugin like Custom CSS and JS.

body {font-family:roboto; font-size:18px;}
h1,h2,h3,h4,h5,h6 {font-family:roboto; font-weight:700; text-transform:none !important;}
h1 {font-size:28px;}
h2 {font-size:26px;}
h3 {font-size:24px;}
h4 {font-size:20px;}
h5 {font-size:18px;}
h6 {font-size:16px;}

Now that you know some quick methods for adding Google Fonts to your WordPress site, I’m now going to do a few quick tests to see alternative ways of speeding them up. I ran some tests first with the setup above and the average speed came out at 418ms. Note: Each test was run five times, and the average result was taken.

google fonts cdn speed test

Host Google Fonts Locally

Another way to deliver Google Fonts on your WordPress site is to host them locally on your web server. If your audience is in a certain geographical location and close to your server, it can actually be faster to host them locally than it is to use Google Fonts. Google Fonts CDN is great, but adding those additional external requests and DNS lookups can cause delays.

This method will typically only work if you are using fast hosting. In the example, I’m using managed WordPress hosting from Kinsta, which is ironically powered by the Google Cloud Platform.

To host locally I actually utilized a free tool called the google-webfonts-helper. This allows you to download the Google fonts locally more easily and gives you all of the CSS. Below is an example of what we will end up with. You will need to upload the fonts you downloaded to your web server. In this case, I put them in a folder called “fonts.”

/* roboto-regular - latin */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

We then need to make sure to remove the embed code from Google Fonts in the header so that you no longer have those external calls. I then again ran some tests with the setup above and the average speed came out to 386ms.

local google fonts speed test

Note: The web server is located in Iowa, and the speed test from Pingdom was run from Dallas, TX. So as you can see, even though the server is located elsewhere in the United States, it is still slightly faster to load Google Fonts locally on the server. Of course, you will want to test various locations yourself based on your own audience.

Host Google Fonts on Your Own CDN

Now for a third scenario. On the site above, I’m using a third-party CDN provider already (KeyCDN) to host all of the other assets(images, CSS, Javascript, etc.). What happens if we now throw our fonts on the same CDN, instead of Google’s CDN?

I’m using the free CDN Enabler WordPress plugin. This actually copies the fonts from the “fonts” folder on the web server to KeyCDN automatically. We then have to tweak the code slightly so that the path to the fonts is now pointing to the CDN (such as cdn.domain.com).

/* roboto-regular - latin */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

I then again ran some tests with the setup above and the average speed came out to 384ms.

As you can see, using a CDN is yet again just slightly faster. Not by much, but if you compare it to Google’s CDN, test it, it definitely is faster. Part of this is because it can utilize the same HTTP/2 connection, and it still reduces the external call and DNS lookup, just as hosting locally does. And of course, one advantage to this method is that it will be globally faster.

Summary

As you can see from the tests above, the Google Fonts CDN is great, but it might not always be the fastest. Of course, it will always depend on your own environment and where you are serving up traffic, whether it be to a local audience or global.

I recommend testing each method above for yourself and see which one is the fastest and works the best for your WordPress site. And remember, only load the font weights you actually need!

The post How to Speed up Google Fonts in WordPress appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/speed-google-fonts-wordpress/feed/ 11