download woff All about WOFF Files. WOFF files mostly belong to by WebFonts. WOFF file extension is generated by the Google Chrome browser. Web Open Format is a font format designed for the usage on web pages. Following the recommendation of Consortium (W3C), Web Working Group, WOFF was developed. Saved as a compressed container, it supports both the Truetype and Opentype fonts along with font licensing information. How do you open WOFF files? You need a suitable software like Google Chrome from WebFonts to open a WOFF file. Without proper software you will receive a Windows message " How do you want to open this file? " or " Windows cannot open this file " or a similar Mac/iPhone/Android alert. If you cannot open your WOFF file correctly, try to right-click or long-press the file. Then click "Open with" and choose an application. You can also display a WOFF file directly in the browser : . Just drag the file onto this browser window and drop it. Google Fonts. Yesterday I encountered an unexpected problem. I was using the “Crimson Text” Google Web Font on a project, and the font did render. So I tried “Buenard” and had the same luck. The customary Stack Overflow search led to the conclusion that not all fonts work consistently across platforms. The best way is to download the Google font, run it through Font Squirrel, and serve the file locally. Along the way, it makes it easy to install the fonts on your computer so you can use them in your favorite Adobe products. This post shows you how to do that. Problem: You want to use Google Fonts in your design, so how do you get them into PhotoShop? Solution: Download the TTF files and install the ones you want. Problem: You want to use Google Fonts on a site, but the font itself doesn’t show up in a browser? Problem: You want to use Google Fonts but you want to serve them locally? Solution: Download the TTF files and use FontSquirrel to convert them to a usable form. Step 1: Download the Google Fonts TTF Files. Google makes all the TTF files for its fonts fairly accessible. I recommend that you go to the GitHub project “Google Font Directory” and download the zip file or the tarball, and select the fonts you want. The also has instructions for updating the fonts. Step 2: Convert the TTF file into web font formats. Go to the Font Squirrel Web Font Generator. Upload the TTF file for your font. You will get back a zip file that has a folder with several files in it. Using WOFF fonts in Microsoft Office. WOFF are a new-ish type of font that you might have seen mentions or downloads. Here’s how to use them in Microsoft Office; Word, Excel or PowerPoint. WOFF is Web Open Font Format designed to be compact and easy to download. WOFF is for web sites and mobile apps, not desktop programs like Office. Despite that, there are two ways to get a WOFF font working in Office. One method is practical and useful, the other is theoretical. Office- Watch.com readers expect us to try the more ‘interesting’ options too. Find the desktop font instead. WOFF fonts are versions of standard fonts. They are normal fonts, optimized for web pages and compressed for fast transport. Any WOFF font is almost certain to have a desktop version. Instead of trying to make a WOFF font package work in Office, search the web for the standard version of the same font. Google Fonts is a good place to start. A large open-source directory of fonts, see Using Google Fonts for free in Microsoft Office. Unpack a WOFF font. It’s theoretically possible to unpack a WOFF font into a form compatible with Office for Windows or Mac. Frankly, it’s not worth the trouble since it usually doesn’t work and there’s the easier alternative available. WOFF fonts are a compressed package of web optimized fonts. Technically WOFF is called a wrapper for OpenType or TrueType fonts which are supported in Windows and Mac. However, WOFF doesn’t use a common compression method like ZIP or RAR, so specialist tools are necessary. WOFF v1 & v2 use different compression methods. If you want to try there are various WOFF decompression tools available. Try these online conversion tools: We tried a series of WOFF fonts and only a few could be successfully unpacked. It was much faster to download the desktop version of the font directly. How to Self-Host Google Fonts on Your Own Server. As web designers living in the era of high-speed internet, we have picked up the habit of adding external dependencies such as fonts from third- party servers, most frequently from content delivery networks (CDNs). However, this is not always the best decision. Sometimes, it’s still better to stick to your own infrastructure and host your assets on your local server. In this article, we’ll have a look at how to self-host a frequently used static asset: Google Fonts. This applies to both locally hosted on your system, or your own web server. Even though self-hosting Google Fonts might seem easy and self-explanatory at first, there are loads of things to pay attention to if you want to keep performance in mind. Before getting into the practical details, let’s see when it’s worth hosting Google Fonts on your own server. Pros and Cons of Self-Hosting Google Fonts. These pros and cons don’t only apply to Google Fonts but any web-hosted fonts. The one difference that’s probably worth noting is that Google Fonts are stored on Google’s CDN, so you can expect low latency, proper maintenance, and good performance (as opposed to some smaller providers). Plus, you don’t have to worry that the service will be discontinued at some time in the future. Pros of Self-Hosting Web Fonts: Better for privacy : third-party CDNs frequently use cookies and other tracking algorithms that you don’t necessarily know about; this is especially problematic in countries where you are required to get your users’ explicit consent to be tracked on your site (for instance, here’s a good case study of the GDPR-compliance of Google Fonts). Better for security: it’s not likely that Google Fonts will be hacked, but on your own server, you still have full control over your security. Faster, better performance : Google Fonts load a lot extra CSS that you won’t need; plus if you self-host, you can bundle and minify your font-related CSS rules/files too (which also results in fewer HTTP requests). Offline availability : this is more important in the case of a mobile/desktop app that users frequently access offline, however, they might also want to access your using an offline browser or simply download it for later use. Cons of Self-Hosting Web Fonts: Extra time and knowledge : it takes more work and expertise to add the font files and the @font-face rules. Higher latency of font delivery : Google CDN is a globally distributed network that delivers resources fast, with global distribution and low latency. Less likely that fonts are cached: if you pull your fonts and the related CSS from the Google CDN, it’s more likely that the user’s browser has already cached these resources. What Happens When You Add Google Fonts from CDN? Before looking at how to self-host Google Fonts on your server, let’s quickly see what happens when you pull them from Google’s CDN. Say you want to add the Montserrat font to your site. This font has 18 static variants, but you only want to add four: regular, regular italic, bold, and bold italic. As Google Fonts have a user-friendly interface, you only have to select the styles you want to add, and it automatically generates the tag you need to insert into your HTML file. Click the Embed tab on the right of the screen, copy the tag, and add it to your HTML page (don’t use the @import rule; it’s bad for performance as it increases the page load time). So, to add the regular, regular italic, bold, and bold italic variants of the Montserrat font to your site, you need to insert the following line into the section of your HTML file: Then, you can add the following CSS rule to any selector in your CSS file: Okay, that’s all. But, what actually happens in the background? We can get an answer to that question by entering the URL above into the browser’s address bar. You can see that the link includes a CSS file with multiple @font-face rules to all the character sets that the Montserrat font supports; respectively Cyrillic, Cyrillic Extended, Vietnamese, Latin, and Latin Extended. This totals 20 @font-face rules for the four font variants (regular, regular italic, bold, and bold italic). However, if we self-hosted these same fonts, the Latin character set would suffice on an English-language website. That would come to four @font-face rules altogether instead of 20. If we wanted to use all the 18 font variants of Montserrat, that would come to 90 @font-face rules instead of 18—an even a bigger difference. Now, let’s see how to self-host Google Fonts on your own server. How to Host Google Fonts on Your Own Server. To host Google Fonts locally, you need to upload all the font files you want to use to your server and also add the corresponding @font-face rules to your CSS. You can do all that manually, but there’s a handy open-source tool called Google Web Fonts Helper that automates the process for you. In Google Web Fonts Helper, you can find all Google Fonts in the left sidebar. To download the font files and generate the related CSS rules, you need to fill in a simple form that lets you select the charset, styles, and the level of browser support: I’ve selected the Latin character set, the same styles (regular, regular italic, bold, bold italic), and support for modern browsers which means that we’ll add the WOFF and WOFF2 formats that are specific web-safe compression techniques for TTF (and OTF) fonts. If you also want to support older browsers, choose best support instead of modern browsers , which will add the fonts in five formats: WOFF, WOFF2, TTF, EOT, SVG. Note : the browser will only download the format it needs. For instance, if it supports WOFF2, it won’t download the WOFF, TTF, EOT, and SVG files, even if they are present on your server. Below the form, you’ll find the @font-face rules you need to add to your CSS file. For example, here are the @font-face rules that the generator has returned for our specs: As you can see, each font variant has its own @font-face rule. Within each @font-face rule, the src descriptor first checks if the user has the font installed on their , using the local() function. If the user has the font file locally, the browser doesn’t have to download it. Then, the url() function adds the font file in both WOFF2 and WOFF formats (but the browser will download only the first file type it supports). Copy these @font-face rules from Google Web Fonts Helper and insert them into the beginning of your CSS file. You also have to download and unzip the font files, which you can do by clicking the Download files button at the bottom of the generator: Our example ZIP file will contain eight font files, the WOFF and WOFF2 versions of the four font variants. After unzipping it, upload all the font files to your server (preferably into a folder called fonts/ ). Also don’t forget to pay attention to the URL path, as the url() functions have to use the exact file path where your fonts are located on your server. Alternatively, you can also download the font files directly from Google Fonts, however, they are only available in TTF format there. Although you can also add the font files as TTF (WOFF and WOFF2 are compressed TTF files after all), your font files will be much heavier (for instance, Montserrat Regular is 110 KB as TTF, 23 KB as WOFF, and 19 KB as WOFF2). You can also use a compression tool such as Google’s woff2 tool, but altogether it’s easier to generate the WOFF and WOFF2 files using Google Web Fonts Helper. Add the Font-Display and Unicode-Range Properties. If you have a look again at the CSS file pulled from Google CDN, you’ll see that each @font-face declaration includes two extra rules that Google Web Fonts Helper doesn’t add: font-display and unicode-range . Both are descriptors of the @font-face rule. The font-display descriptor defines what happens if the custom font file is not loaded immediately. Using it with the swap value is a performance optimization technique. It means that the custom font is immediately substituted with a system font and when it’s ready to use, it replaces the system font. Using this technique, you can decrease page load times and avoid invisible text during font loading. The unicode-range descriptor specifies the character set that the belonging font file covers. According to the Mozilla Development Network: This descriptor can be useful when you want to load more than one character set, say Latin and Cyrillic on a bilingual website. If you add a unicode-range descriptor to each @font-face rule, then the Cyrillic font files won’t be downloaded on pages that use only Latin characters, and vice versa, the Latin font files won’t be downloaded on pages that use only Cyrillic characters. You can also use unicode-range to load just a range of characters, which can improve page load time if you want to use a font as a display font (for instance, for a logo) or show only the numeric characters. As in our example, we only use one character set and want to make all the characters available for the browser, it’s not necessary to add the unicode-range property here. However, as font-display: swap; can improve page load times, we add it to each @font-face rule: That’s How You Can Host Google Fonts Yourself! Self-hosting Google Fonts has both pros and cons: you need to assess your needs and goals to decide whether to host them on your own server or pull them from Google’s CDN. You can also choose a mixed solution to get the best of both worlds. For instance, this tutorial by John Franey shows how to add @font-face rules locally but pull the font files from online. These days, you can host your website on Google Cloud with hosting providers such as Siteground or Kinsta as well. In this way, you can take leverage of a globally distributed network while still hosting your fonts locally. If you can’t decide, you can also test which solution works better for your specific use case. Set up one test site with locally hosted Google Fonts and another one that loads the fonts from Google CDN, and compare page load times with a performance analysis tool such as Lighthouse or GTMetrix. And, if you want to add Google Fonts to your WordPress site, check out Jessica Thornsby’s tutorial here on Tuts+, too. More Web Font Inspiration. Check out these tutorials and design posts if you’re still looking for more web font inspiration: Converting CJK Fonts to WOFF is Harder Than You'd Think. tl;dr: Don't even try online converters. They'll drop the CJK characters. Just install woff-tools and/or woff2 on your own machine. Most Linux package managers will have them; on Windows, you can use the EXEs in this GitHub repo. A few days ago, I needed to install a web font (Noto Sans JP) for Japanese text on a site I was working on. The site supports IE11, so I would at least need a WOFF file, and a WOFF2 for newer browsers. The obvious place to look was Google Fonts. It used to provide a ZIP download of any web font in multiple formats (at least TTF, WOFF, and WOFF2). But Google Fonts seems to have removed this feature; ZIP downloads only include OTF files now. If I wanted IE11 support, I'd need to convert these to WOFF. That should be easy, right? Googling "convert OTF to WOFF" turns up dozens of online web font converters. These usually convert just the ASCII subset of characters by default, but some of them provide custom subsetting options. Except… Yeah, Japanese is nowhere to be found. Several other complex scripts are missing too, like Chinese, Korean, and Arabic. This was true for every online converter I tried. Luckily, some of these converters support custom Unicode ranges. According to this StackOverflow answer, the Unicode ranges for Japanese text are 3000-303f , 3040-309f , 30a0-30ff , ff00-ffef , and 4e00-9faf . So let's try those. The first converter I tried was Transfonter. I put in the custom Unicode ranges, and it converted the files… sort of. See those file sizes, including the download file size on the top left? Sure, OTF→WOFF should reduce the file size, but 13MB to 39KB just seems too good to be true. I tried including a TTF file in the result, opened it in a font viewer, and, sure enough, the Japanese characters aren't there. OK, what about Font Squirrel? It seems like the most full-featured and professional online converter. So I tried uploading the OTF file, and… This was a theme in every converter I tried. They don't recognize that Japenese characters exist, even if subsetting is disabled. I would assume this is true for any script that isn't listed in the Unicode subsets section. OK, let's try this a different way. What software do these online converters use to convert the files? Is there a command-line tool I can use for this? It turns out that there are two: woff-tools for WOFF, and woff2 for WOFF2. The actual executables are called sfnt2woff and woff2_compress . If, like me, you use Debian Linux, then this is all you need to know: both of these apps are available as APT packages. If you use a different OS, things might be trickier. woff2 is easy to set up; it's just an open-source C++ project on GitHub. But woff-tools , though technically open-source, is only available on a people.mozilla.org page that requires a login and permission to access. Luckily, there's a GitHub repo with Windows binaries of both sfnt2woff and woff2_compress . I haven't tried any of this on Mac, but it looks like both of these utilities are available on Homebrew too. Once we have the utilities, converting the OTFs to WOFFs is easy: Finally, working Japanese WOFF files! WOFF2 compression actually reduces the size of these 4MB font files by half. And it's supported in all modern browsers, so there's no reason to serve the OTF files Google Fonts gives you. Copyright © 2020-2021 Adam R. Nelson. Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 4.0 International License.