Click on the image or font name to see examples of websites using the fonts in the wild. Click on the “Google Fonts” link to use the fonts on your website. The provided ZIP file downloads contain the latest versions of the font files to install on your desktop. The files come from the Google Fonts repository on —I regularly check the on GitHub to make sure the files provided here contain the latest versions. Note: An asterisk indicates the family is body text friendly, meaning it contains normal, italic and bold styles and has low-to-moderate stroke contrast, large counters, open apertures and a large x-height. Frequently Asked Questions Do you have any recommendations for pairing Google Fonts? Clicking any of the font names above (or image samples) will take you to a page that shows examples of that font in use in the wild.
This is a great way to gather inspiration and see the combinations that other designers have used. I also wrote an article sharing some of with a focus on lesser-used typefaces.
I have additional pairing recommendations in, which also includes the closest free alternative on Google Fonts to every commercial font featured on Typewolf. Can I use fonts from Google Fonts in commercial projects? All fonts available on Google Fonts are released as open-source under either the. That said, you should always double-check and read the individual license before using any font in a project. Can I use fonts from Google Fonts in a WordPress theme that I am selling?
Mar 20, 2008 - Haptic The Haptic family is a sans serif typeface which was optimized for use in small. Professional Typefaces - Graphik by Christian Schwartz.
All fonts available on Google Fonts are released as open-source under either the. Both licenses allow for redistribution with the requirement that a copy of the original license and copyright notice is included. That said, you should always double-check and read the individual license before redistributing any font. Can I use fonts from Google Fonts in print? You can download the ZIP files from this page (using the links located under the bottom right corner of the sample images) and then install the font files locally on your system like you would any other font. Some fonts are optimized for use on screens, so it’s always a good idea to print some test copies to see how they read on a printed page.
Can I use fonts from Google Fonts in Photoshop? You can download the ZIP files from this page (using the links located under the bottom right corner of the sample images) and then install the font files locally on your system like you would any other font. Do you recommend self-hosting or serving the fonts directly from Google? I recommend using the Google Fonts API (the HTML/ CSS embed code snippets provided by Google).
This allows you to take advantage of cross-site caching, which means a user will already have the fonts cached locally in their browser if they have visited another website that uses the same fonts (and due to the popularity of Google Fonts, this is oftentimes likely). If you use self-hosting, every user will have to download the fonts directly from your server which is usually much slower. What are your favorite script fonts on Google Fonts? A few of my favorites are,. What are your favorite condensed sans-serifs on Google Fonts? (included in the list above) is really great. And come in condensed widths as well.
A few other nice choices are,. What are your favorite chunky display serifs on Google Fonts? Is super nice (it didn’t make the top 40 list as it only includes a single style). Also check out. Do you have any other favorites that didn’t make this list?
It was hard to narrow this list down to 40 options, so here are some other contenders that didn’t quite make the cut:,.
Advertiser Disclosure WebsiteSetup.org (this site), is a free online resource for helping people create websites, learn WordPress and more However, creating a site like this can take a lot of time, money and work hours To run WebsiteSetup as a business and keep it accurate and up-to-date, we’re earning commissions from some of the products/services listed on this page. If you end up purchasing through our referral links the following products, we earn a commission:. BigCommerce (www.BigCommerce.com). Bluehost (www.Bluehost.com).
iPage (www.iPage.com). HostGator (www.HostGator.com). Shopify (www.Shopify.com). Site123 (www.Site123.com). SiteBuilder (www.SiteBuilder.com).
SiteGround (www.SiteGround.com). Wix (www.Wix.com) Although we’ve found these products and services reliable and useful, we recommend you to read more reviews online to make a fully unbiased conclusion. If you have any questions about our advertiser disclosure, don’t hesitate to contact via advertising(at) websitesetup(dot) org. 90%. of website design comes down to:.
(1) the image assets you use. (2) the fonts you select.
(.That’s my personal completely hypothetical, biased estimate.) Font embedding services (like Google Web Fonts or ) sprung up as an alternative, giving your designs something new, fresh, and unexpected. They’re also super easy to use. Take Google for example: Choose any font like. Generate the code and paste in your document’s.
And you’re all set to reference it in CSS! That took 60 seconds. And it was completely free.
(Thanks, Google!) What could go wrong, right? Not everyone will have access to that same font. Which means you will have a problem. That beautiful font you just chose is going to show up as something random for your visitors. Not if you create a fallback with a web safe alternative!
Here’s how it works. I recently published a free, Why Does ‘Web Safe’ Matter?
Each device comes with its own pre-installed font selection. The selection is based largely on its operating system. The problem is that every system differs a bit. Windows-based devices might have one group. MacOS ones pull from another. Google’s own Android system uses their own as well. Now pull up a website.
Even this one would work. The font you see may not be the one original one intended. Meaning: Let’s say the designer picked some obscure, paid font family for this site’s design. If you don’t have that font already installed and it’s not pulling from a web-friendly place – more on that later – the font you see would default back to some basic variation like Times New Roman. You, as the visitor, wouldn’t necessarily know that this is what has happened, though. For you, it might just look plain ugly. The ‘Web safe’ ones, appear across all operating systems.
They’re the small collection of fonts that overlap from Windows to Mac to Google (even Unix or Linux ones too). They give designers (and website owners) the ability to specify which fonts to fall back to if needed. That way, you can control what shows up (no matter what) across all devices. And you can pick something that’s still kinda close to the original font (so that what your users wouldn’t see something random or out of place). It’s a plan B, the ‘just-in-case’ version. An emergency system to save the world from bad font selections.
Let’s take a look at the most popular web safe fonts to choose from. 15 Best Web Safe Fonts There might be a few more. But these are the best 15 web safe fonts to choose from.
Select one of these and you can’t go wrong. Arial Arial is like the de facto standard for most.
It’s one of the most widely used sans-serif fonts (which means no little curls on the end of each letter). It’s often substituted on Windows devices for other interesting (read: more beautiful) font choices.
Helvetica Helvetica is usually the designers’ go-to sans serif font. You can almost never go wrong with Helvetica (or at least using it as a fallback for most other choices). Times New Roman Times New Roman is to serif what Arial is to sans serif. It’s among the most popular on Windows devices and is a new variation on the old Times font. Times The Times font probably looks familiar.
It’s the old newspaper print that you’re used to seeing in a small size in narrow columns. It’s about as traditional as it gets. Courier New Courier New, similar to Times New Roman before it, is a variation of another old classic. It’s also considered a monospaced font (as opposed to the serif vs.
Sans serif we just saw). Courier Courier is the old monospace stand-by available on almost all devices and operating systems.
Verdana Verdana is a true web font because (1) the simple sans serif lines and (2) it’s super large size. The letters are almost elongated, which makes it easy to read online. Georgia Georgia is similar to Verdana in size and stature (with bigger-than-usual letters compared with fonts of the same size). So while it’s great for certain circumstances, make sure to avoid pairing this serif font with others (like Times New Roman) which might look minuscule in comparison. Palatino Palatino dates back to the Renaissance. It’s another large font that makes it perfect for the web, traditionally used for headings and print-style ads.
Garamond Garamond is another old-school font that dates back to styles used in. This new and improved version was introduced and bundled on most Windows devices (and has been adopted by others since). Bookman Bookman (or Bookman Old Style) is another perfect headline option that maintains legibility (or readability) even when used in a small size.
Comic Sans MS Comic Sans MS is a playful, whimsical alternative to other sans serif options. It’s also kinda fugly.
Don’t use it! Trebuchet MS Trebuchet MS is a medieval-themed font designed by Microsoft in the mid-nineties. It was used on the XP version, and today commonly appears as body copy on the ‘net. Arial Black Arial Black is the bigger, bolder, badder version of your basic Arial. Funny enough, it also shares proportions with Helvetica. Why is that important? So that they could use it to replace Helvetica and print things without paying for the license.
Impact Impact is another bold headline choice that looks great in a few short words, and absolutely terrible in a sentence or longer. Conclusion Web-safe fonts give you a Plan B. A fallback option for when your first option might not work. They’re widely accessible and have been available on most devices for decades (in some cases). While not all of them are #winners (Comic Sans MS?
Yuck!), there are enough to choose from that should be closely related to your original option. What happens, when if not?
You can’t go wrong with Helvetica! Hello Robert Mening, Thanks for your concise, helpful overview. I have a question, but first, an explanation. My search question was “What font families are least problematic for websites?” Your article was second on the list following what’s safe for Chinese fonts in CSS.
After reading your message, I thought, what goes around comes around. With a couple of exceptions, your list took me down memory lane to another century when I learned to put the lead in leading, then moved on to IBM Selectric, then to Compugraphic and Verityper phototypesetting, then to the the earliest Apples, and then to 15 years with InDesign. It has spoiled me with its precise tools to minutely tweak type every which way from Sunday. Now I’m making the transition into digital production. Unspoken yet obvious in your overview is the ongoing goal of all typography: do what’s best to communicate. I believe that type isn’t “there” to draw attention to itself.
Like design — with or without type — it must be message-driven and serve to communicate, up to and including type and design that is gloriously and outrageously shocking. It was this perspective that defined my choice to ask what’s least problematic, not what’s best. Perhaps it is something like a physician’s “first, do no harm” mantra. For my first digital project I will try to use the Google digital serif family Libre-Baskerville but will second that with Georgia, then Times. For the sans-serif I’ll bypass Cabin and CabinCondensed and go with Arial, backed up by Helvetica.
Libre-Baskerville is big. It’s an elegant Cadillac cascade, a pleasure to read online, and yet it’s kinda fat so I want to tweak it just a wee bit, perhaps reducing character width somewhere between.5% to 1.5%. (Perhaps there’s a “chunky” digital Caslon but I’m on deadline with no more time to research.) The sans-serif options also need tweaking. I want to fractionally condense the characters such that you might not consciously notice, yet visually you won’t bang your eyeballs on clunky characters from line-to-line.
I’m not complaining, but there are moments while working with Helvetica when it feels like the “gift”, perhaps it’s a message with complex content, long sentences, and long paragraphs, is wrapped in butcher paper and sealed with duct tape. The second sans-serif problem is that I need to condense and yet pump-up the bold (what’s really needed is an extra bold or black) so that it kinda mimics Frutiger condensed bold or black. CabinCondensed would work visually even though the bold face is weak but I fear the kinds of complications that you’ve described in your article.
So here’s the query: can I do a wee bit of tweaking in CSS with these web-safe fonts? If so, do you have any tips or links to info on how to safely manipulate web-safe font characters? Thank you for your patience and expertise. Hello Liana, you may find and properties useful, as they are the only css properties I need when modifying the text. Letter spacing is the same with “tracking” in some design software, while font stretch is the “horizontal scale,” which widens the text.
With these two, you can modify web-safe fonts to make it look unique. The font-stretch property is a new property from CSS3, meaning it will only work for browsers that supports CSS3.
If you want to make your font style “less problematic” then avoid using the “font-stretch” property, since there are still a lot of people who use outdated browsers. Hi, I am not trying to build a web page, or write any documents. I am just trying to figure out how to set my fonts so I can read them again. I have Windows 10 but use Google Chrome as my browser. (Yes, I fiddled with them, and now I don’t know how to go back.) I’ve read about Serif, Sans-serif and fixed-width. I can barely read the tabs or the bookmarked pages on my screen, and I don’t know how to make them larger. Chrome was recently updated, and I have found where to change fonts, but I can’t make them legible.
These are my settings for size: Standard Times New Roman 16 Serif Times New Roman 16 Sans-serif Ariel 16 Fixed-witdth Consolas 16 The MINIMUM Font size is set at 17. Chrome recommends setting FONT size at medium. I appreciate any help you can give me. Thanks, Jess. WebsiteSetup is a free resource site for helping people to create, customize and improve their websites. The main goal of this website is to provide step-by-step instructions for beginners to set up their website or a blog. Most of the content on WebsiteSetup.org is written by Robert, a nomad web developer.
We also cover WordPress related questions, such as or how to. Contact Us You can contact us through Facebook and Twitter.
Or use the emails below:. Questions & help: (editor). Advertising:. Feedback.