One place for hosting & domains

      Fonts

      The Top 22 Web Safe Fonts to Use on Your Website


      Whether you’re a budding professional web designer or a DIY business site builder, you may have come across the term “web safe fonts.” This is an important element for any successful design, but finding and using the best typefaces for the web can be tricky.

      Fortunately, web safe fonts are easier to access and incorporate into your website than you think. They not only ensure consistency across your branding but also provide advantages in terms of User Experience (UX) and Search Engine Optimization (SEO).

      This article will explain what web safe fonts are and why they’re important from a web design perspective. Then we’ll share some popular examples, resources where you can acquire them, and instructions for using them. Feel free to use the links below to jump to the section that most interests you.

      There’s a lot to cover, so let’s get started!

      An Introduction to Web Safe Fonts (And Why They Matter)

      A web safe font is simply a typeface that is viewable on most devices, including desktop and mobile. Typically, they come pre-installed on each Operating System (OS).

      This is important because if a visitor tries to view your website and it uses a font that is not installed on their device, they will see a generic typeface such as Arial or Times New Roman instead. In some cases, your content may even become unreadable on certain devices.

      Of course, the latter situation is undesirable, as users won’t typically stick around if they can’t read your site. However, even having to display a generic font family can disrupt your website’s overall design. It may also lead to inconsistencies in your branding.

      In some cases, using web safe fonts may improve your pages’ loading times. Since they are pre-installed on most popular operating systems, modern browsers don’t have to download them from your server while rendering your site. This can improve both UX and SEO.

      Struggling to Choose a Specific Font?

      Don’t worry; when you partner with DreamHost, you get access to WP Website Builder and more than 200+ industry-specific starter sites for free!

      The Top 22 Web Safe Fonts to Use on Your Website

      Fortunately, there are many different web safe fonts out there that you can choose from when designing your site. Finding one that matches your brand’s tone and personality shouldn’t be too much of a challenge.

      To give you a head start, we’ve rounded up some popular choices for your consideration. Let’s start with the basics and then take a look at a few more unique options.

      1. Arial

      The Arial font.

      Many designers see Arial as simple or boring, but you can’t deny that it’s a tried and true web safe font. This is perfect for use as a fallback for a more unusual (and not always available) typeface. Plus, it’s highly legible.

      2. Times New Roman

      The Times New Roman font.

      If you appreciate the reliability and simplicity of Arial but would prefer a serif font, Times New Roman is the way to go. Although it’s also somewhat lacking in personality, you can rest assured that it will be viewable on any device.

      3. Helvetica

      The Helvetica font.

      Helvetica is a sans serif font that many prefer as an alternative to Arial. It’s purposefully designed to be industrious and lacking in personality, making it useful for documentation or other no-frills content that you want to make sure is readable.

      4. Calibri

      The Calibri font.

      Calibri is another basic sans serif font, similar to Helvetica and Arial. It has been the default font for Microsoft Office for several years now and is an excellent pick for modern businesses and e-commerce sites. By using an unassuming, unintrusive font, you can draw more attention to your products and services.

      5. Georgia

      The Georgia font.

      Classy, serifed Georgia has a timeless look that adds to your website’s tone and style without overwhelming the design. It’s ideal for lifestyle blogs and brands that want a slightly softer, not-too-edgy feel.

      6. Cambria

      The Cambria font.

      Cambria is similar to Georgia, but with a slightly more modern twist. Its serifs are a little more subtle, which can make it easier to read – especially on smaller screens.

      7. Veranda

      The Veranda font.

      Veranda was designed specifically for on-screen use, and as a result, is particularly easy to read on all devices. It has a classic feel and certainly won’t distract from your content. It adapts well to headings or body text, so you can use it for just about any kind of content.

      8. Tahoma

      The Tahoma font.

      Tahoma is another clear and easy-to-read sans serif font. It’s flexible enough to work well for business sites, blogs, creative portfolios, or whatever else you need it for. The characters are clean, uniform, and easy on the eyes.

      9. Trebuchet

      The Trebuchet font.

      Designed for readability and usage in signs, Trebuchet is the perfect font for headings and titles. It also retains its legibility at smaller sizes, so don’t hesitate to use it in your body text as well.

      10. Century Gothic

      The Century Gothic font.

      Sleek, clean, and geometric, Century Gothic makes a bold statement in headings and titles. If Arial and Helvetica are too plain for your tastes, but you still want a sharp sans serif font for your site, this one is worth considering.

      11. Didot

      The Didot font.

      Classic, elegant Didot gives off an intellectual feel that would be well suited to a university site or even some blogs or startups. It features clean, straight lines with minimalist serifs that don’t take away from the text too much.

      12. Bodoni

      The Bodoni font.

      This eye-catching serif typeface is a more interesting alternative to the standard Times New Roman. Edgier than Georgia but not as in-your-face as something like Courier New or Rockwell, Bodoni a great middle-ground if you want your text to have some flair without taking over the design.

      13. Calisto

      The Calisto font.

      Calisto’s soft lines and dainty serifs give it a feminine air perfect for lifestyle blogging or female-run startups. Its tight spacing may not lend itself well to long blocks of text, but it will look stunning in headings and titles.

      14. Candara

      The Candara font.

      Featured in Microsoft’s ClearType Font Collection, Candara is often seen as one of the less modern-looking sans serif fonts. It projects an open, easy-going attitude that could lend a memorable tone to your website and brand.

      15. Optima

      The Optima font.

      It can be hard to inject a lot of personality into a sleek and clean sans serif typeface, but Optima certainly accomplishes this. It’s memorable enough to lend itself well to developing your brand identity but won’t make long passages feel cluttered or intimidating to readers.

      16. Palatino

      The Palatino font.

      An ideal font for digital magazine headlines and other text that needs to make a bold statement, Palatino is a classic serif font. It feels a little less structured than Georgia and has much more personality than your standard Times New Roman.

      17. Quicksand

      The Quicksand font.

      Quicksand is a modern font designed to look good on mobile devices. It’s simple and not too flashy, but still shows enough quirky personality to keep your body text interesting. This fairly streamlined typeface is easy to read as well, making it a solid pick for text-heavy sites.

      18. Courier New

      The Courier New font.

      Courier New is a quirky font that is highly recognizable and packs a lot of personality. It is the perfect choice if you want your site to have a more vintage feel and are looking for a strong font that will convey your brand’s identity.

      19. Rockwell

      The Rockwell font.

      Rockwell’s distinctive serifs are reminiscent of Courier New, only without the overwhelmingly vintage vibe. It may be a little more difficult to read on smaller screens and at smaller sizes, but it can be a fun font for headings and titles.

      20. Garamond

      The Garamond font.

      Garamond is a timeless font originally designed in 1615. Unfortunately, it’s easier to read in print than on the web. However, you can still make use of it as an accent typography font in headings, or perhaps even as a part of your logo.

      21. Copperplate

      The Copperplate font.

      This highly distinctive font is hard to miss and brings an industrial, official feel to your text. Copperplate is the ideal typeface for drawing attention to your headlines or logo. Unfortunately, it could become hard to read when used for smaller body content.

      22. Impact

      The Impact font.

      Aptly named, Impact is a statement font that you may want to reserve for headings and titles. This heavy font packs a punch and grabs readers’ attention as they scroll your blog roll or skim your posts for key information.

      Don’t Sweat the Font Size

      Whether you need help finding a different font, designing a custom site, or downloading a font file, we can help! Subscribe to our monthly digest so you never miss an article.

      Where to Download Web Safe Fonts

      In short, you shouldn’t have to download web safe fonts. Since they’re already pre-installed on all popular operating systems, you can simply code them into your site using CSS, and they should appear as intended across all devices.

      With that being said, if you feel the need to download a web safe font for some reason, you can find them in most of the popular font libraries, such as Google Fonts, DaFont, or FontSpace.

      However, keep in mind that just because a typeface is available via one of these resources doesn’t automatically mean it’s web safe.

      How to Add Web Safe Fonts to Your Website

      You can add fonts to your website with CSS. The best practice is to include your preferred font (which may or may not be web safe) and a fallback font (which should always be web safe). This way, if your primary font choice is not compatible with a user’s operating system, you can still have a say in the backup font that’s shown in its place.

      There are a few different options for adding the CSS to incorporate web safe fonts on your website. If you’re using WordPress, you can put it in the Additional CSS section of the Customizer.

      The Additional CSS section in the WordPress Customizer.

      Alternatively, you can change your website’s font in its stylesheet (style.css). There should be a fonts and typefaces section of this file where you can specify which fonts should be used for different types of text.

      Here’s an example:

      p {font-family:Montserrat,Arial,sans-serif; }

      In this snippet, we’ve set the paragraph text to display the Montserrat font first. If a user’s device doesn’t have Montserrat installed, Arial will be used instead. You can include more than two fonts if you wish and use different fonts for body text, headings, and titles.

      Do You Have a Favorite Web Font?

      If you’re not an experienced designer, it’s easy to overlook the importance of your website’s font. However, this element plays an important role in your branding. Choosing a font that isn’t viewable on all devices can disrupt the UX or even prevent visitors from reading your content entirely.

      In this post, we’ve explained the significance of web safe fonts and how you can add them to your site. We also shared 22 options that you can use in your upcoming designs, including common sans serif fonts such as Helvetica, classic serif fonts like Georgia, and some unique options, including Courier New and Quicksand.

      Are you ready to start designing your new site? With our shared website hosting plans, you can have it up and running in no time. Check them out today!



      Source link

      Variable Fonts on the Web Using CSS


      Font variations is a new set of features defined as part of the OpenType specification. It allows for font files to contain multiple variation of a font within a single file, called a variable font. This in turns allows the use of one font file on the web that can achieve multiple font styles.

      On top of the obvious savings in turns of data that needs to be sent over the wire to display the text on a page, variable fonts enable features such as animating or transitioning font styles and custom font styles, both of which are not possible with static fonts.

      Let’s go over some examples of using a variable font, and then break down how to use them on the web today.

      Variable Font Examples

      Note that you’ll need to use a supporting browser to properly view the examples below.

      Source Sans Variable

      Source Sans is a popular free font that now comes with in a variable version. Hover over the text to see how the value for font-weight can be transitioned:

      See the Pen XWdaGLZ by alligatorio (@alligatorio) on CodePen.

      And this is achieved using some very simple CSS rules:

      @font-face {
        font-family: 'Source Sans';
        src: url('/assets/fonts/variable/SourceSansVariable-Roman.ttf') format("truetype-variations");
        font-weight: 1 999;
      }
      
      .source-sans, .source-sans2, .source-sans3 {
        font-family: 'Source Sans';
        transition: font-weight .45s ease-out;
      }
      
      .source-sans:hover, .source-sans2:hover {
        font-weight: 999;
      }
      .source-sans3:hover {
        font-weight: 200;
      }
      

      Custom font styles

      Here are some examples all using the same font, Decovar, a variable font that defines custom axes and allows for unique and stylized text:

      See the Pen RwaZdXX by alligatorio (@alligatorio) on CodePen.

      And here’s the CSS rules used for that:

      @font-face {
        font-family: Decovar;
        src: url('/assets/fonts/variable/DecovarAlpha-VF.subset.ttf') format("truetype-variations");
      }
      
      .decovar, .decovar2, .decovar3 {
        font-family: Decovar;
      }
      
      .decovar {
        color: var(--green3);
        font-variation-settings: "BLDA" 506.944, "TRMC" 1000, "TRMK" 324.653;
      }
      .decovar2 {
        color: hotpink;
        font-variation-settings: "WMX2" 580.838, "TRMB" 1000;
      }
      .decovar3 {
        color: rebeccapurple;
        font-variation-settings: "TRMF" 159.18, "TRME" 1000;
      }
      

      Now that you’ve seen some real-life examples, let’s go over some of the concepts and how to make use of variable fonts in your own web pages.

      Font Axes

      Variable fonts define their variations though axes of variation. There are 5 standard axes:

      • ital: Controls the italics. The value can be set using the font-style CSS property.
      • opsz: Controls the font’s optical size. The value can be set using the font-optical-sizing CSS property.
      • slnt: Controls the slant of the font. The value can be set using the font-style CSS property.
      • wght: Controls the font’s weight. The value can be set using the font-weight CSS property.
      • wdth: Controls the font’s width. The value can be set using the font-stretch CSS property.

      Fonts can also specify custom axes, and these need to have a 4-letter uppercase name instead of the 4-letter lowercase names of the standard axes. The Decovar font demoed above is a prime example of a font using a multitude of custom axes.

      The standard axes can be set with well-known CSS properties (e.g.: wdth is set with font-weight), and the new CSS font-variation-settings is used to control the values for axes otherwise.

      For example, here we define a style for the NobotoFlex variable font:

      h1 {
        font-variation-settings: "BASE" 500, "SPAC" 200, "wght" 322, "HEIG" 456;
      }
      

      Which could have alternatively been defined like this:

      h1 {
        font-weight: 322
        font-variation-settings: "BASE" 500, "SPAC" 200, "HEIG" 456;
      }
      

      It’s a good idea to use the native CSS properties for the axes that have one.

      Note that fonts don’t have to implement all 5 standard axes, and instead you should consult the documentation of the font to know what axes you can control.

      Note also how font-weight can take values anywhere between 1 and 999, compared to the 100-value increments we’re used to.

      Using Variable Fonts with @font-face

      Using variable fonts on the web involves defining @font-face rules that point to the variable font files. The following is a brief overview of how it’s done, but for there are a few caveats you may want to learn about for cross-browser support.

      Here for example we define two version for the Source Sans font family, one regular and one bold. Both versions make use of the same variable font file, but different font files as a fallback for browsers that don’t support variable fonts:

      @font-face {
        font-family: 'Source Sans';
        src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
        src: url('/path/to/SourceSans.woff2') format("woff2");
        font-weight: 400;
      }
      
      @font-face {
        font-family: 'Source Sans';
        src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
        src: url('/path/to/SourceSansBold.woff2') format("woff2");
        font-weight: 900;
      }
      

      And it can now be used within your CSS rules as usual:

      h1 {
        font-family: 'Source Sans';
        font-weight: 900;
      }
      
      h2 {
        font-family: 'Source Sans';
        font-weight: 400;
      }
      

      You can also specify a range in your @font-face rules, to retain the ability to use all the possible values within your regular CSS rules:

      @font-face {
        font-family: 'Source Sans';
        src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
        src: url('/path/to/SourceSans.woff2') format("woff2");
        font-weight: 1 999;
      }
      

      With the above, we can now use any value between 1 and 999 for the font-weight property. Non-supporting browsers will use a font-weight value of normal.

      Available Fonts

      You can find and play with most of the currently available variable fonts on V-fonts.com. A few notable Open Source ones are Barlow, Mutador Sans, Source Sans, Amstelvar and Cabin VF.

      Some are also available through Google Fonts as early access fonts.

      TTF to WOFF2

      Font files will often be provided in the TrueType format (ttf), but for the web it’s a much better idea to compress the font file to the WOFF2 format, to save on space. You can use a tool like FontTools to compress a font file as WOFF2. More user-friendly GUI or online tools will surely become available really soon.

      Browser Support

      Support for variable fonts is already pretty good, so in theory you can start using them today. There are a few caveats with support however, and some things are still being ironed-out for their usage within CSS as part of the CSS Fonts Module Level 4. Here’s a nice summary what’s still in flux at the moment.

      Here’s some further reading material if you want to expand your understanding of using variable fonts on the web:

      And here are two tools that allow you to easily test out and find variable fonts:



      Source link