Download Zilla Slab Font
Pamela Olivares
Zilla Slab is used as the branding font for Mozilla Foundation, featured in its logo as well as their other products and projects, such as MDN Web Docs and Common Voice, alongside Inter and Metropolis.[7][8]
Zilla Slab is available on GitHub,[10] Google Fonts,[11] and through Mozilla's CDN.[12] Its variant, Zilla Slab Highlight, is also sourced in the same GitHub repository, and available on Google Fonts as well.[13]
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.
The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.
5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
The license for this font is the SIL OFL license. This license does not allow us to redistribute derivative versions of the font without wholesale name changes inside and out of the font. Until we figure out a reasonable method of delivering these to you and complying with the license, you will have to use the Webfont Generator yourself on these, renaming the fonts appropriately.
How do the rules change when you design in the open? That is a question I asked myself many times as I prepared to join the Mozilla brand team back in November 2016. Having never worked in an open source company, I knew that I would need to prepare myself for a mental shift.
Jordan Gushwa, a Creative Lead at Mozilla Foundation, and I both agreed that adding an elegant yet flexible slab serif would help us refine the brand. It would allow us to design experiences that lead with typography and written messages, akin to experiences that you might find in lifestyle magazines or design publications when the opportunity presented itself. Mozilla is investing in content creation, as it becomes more important today to tell the stories about how we stay safe and connected on the web.
To develop the Zilla Slab, we worked with Peter Biľak and Nikola Djurek from Typotheque. We respected their work and valued their expertise in multi-language support. I remember that Peter was surprised during our first call when I said we were interested in Slab Serifs that would be at home in top notch magazines or web publications. He happily added those options to our font explorations.
Yuliya: Peter pulled together multiple options of baseline slab serifs from his catalog and showed us how they could evolve to support our logo design needs. Looking for a font that could flex from display to body copy, we quickly settled on Tesla as our base font. Tesla had a good balance of original details but also the evenness that would support a variety of subject matter.
At the start, the main focus was was on the logotype. Peter kept us accountable by illustrating the impact that the decisions we made for the logotype letters would have on the full font family. When showing different logo options, he would extract the letters from the logo and show how the different design decisions would show up in other letters in a typeface.
We launched the logo in the middle of January, and applied it to just a few assets; web headers, signage around the office and some print applications. After the launch, Peter and his team continued to work with us through the details of the full font family. Peter regularly shared the progress, which we in turn shared with many designers and fellow type enthusiasts across Mozilla. Turns out a lot of folks across Mozilla self identify as type nerds!
We continued to expand and ask people for feedback on the identity system internally. As we put it to use we quickly discovered that typing out the words and manually drawing out the highlight box to contain those letters not only took a lot of effort, but also created visual inconsistencies. Sizing the letters and the highlight box separately and having them come together in the same way time and time again, requires a lot of math and visual tuning. Following our idea of focusing on tools that enable people rather than rules that restrict, we asked Typotheque to create a true highlight version of Zilla Slab. The highlight weight would show the counter shapes between letters rather than the letterforms themselves. These additional weights of Zilla Slab make it easy for anyone to contribute to the brand identity and not to be limited by design software or design knowledge. Building the logic and rules into the font makes it a seamless part of the system.
Peter: Crafting a wordmark or a logo is usually a different process from developing a functional typeface. as Wordmarks can create more context specific design and brand solutions, which may not work well in a font. With Zilla Slab, we worked on a wordmark and the typeface at the same time, and had to anticipate how the wordmark features could be translated to other glyphs not present in the original wordmark. This extended possibly to other writing scripts.
Image Generator is a service that allows you to fully customize your texts andvisualize them in various formats. This user-friendly tool enables you to adjustfont style, font size, background color, font color, and your text content.
Image Generator enables you to customize the background and font colors to makeyourtexts visually appealing. You can choose your preferred colors or utilize colorpalettes to achieve specific color harmonies. This allows you to adjust yourtextsto reflect the identity of your projects or brand.
I uploaded two custom fonts using custom CSS. The first works great. The second is script font and when I assigned it to H3, the font changes--but NOT to the right font. It's either a non-script version of the font or something else, but it's not the right font at all. Here is the custom CSS I have entered right now:
Zilla Slab is inviting, clean, and functional. It is a contemporary slab serif with a humanist influence, minimal bracketing, and a very pronounced serif. It has a highlighted styled, which is excellent for blogs and any website with lots of textual information.
Thanks for reaching out. I would like to inform you that Adobe Fonts helps you find fonts matching the text used in images. You can select a font displayed in the search results to activate it immediately.
I have described this at length from the PDF-creation perspective on the Tracker Software forum for PDF-XChange Editor; the staff there are pretty good when it comes to general PDF issues, but it doesn't look as though I'm going to get a lot of insight there on the fundamental font issues.
How can I remove the code-points that don't have any associated glyphs? (I tried loading the fonts into FontCreator and exporting them to new file names, still as OTF with PostScript contours, but the glyphless code-points remained.)
Inter is an open source, sans-serif font designed by Rasmus Andersson.This is our standard type face for body copy in both Firefox and Mozilla brands.If you need to declare it specifically (such as to override some other inheritedfont) you can use the mixin @include font-base;.
Zilla Slab is primarily a display font and should only be used on large text likeheadings. As a general rule, type set in Zilla Slab should stand out. Avoidstacking two sizes of Zilla Slab one on top of the other. Pair headings in ZillaSlab with subheadings in Inter.
Protocol includes different branded themes for Mozilla and Firefox, and each themeuses different fonts with a slightly altered scale. Titles set in Zilla Slab forthe Mozilla brand are slightly larger than their Firefox equivalents, adjustingfor Zilla Slab being overall a smaller display font.
The sizing mixins in turn use another mixin to convert a pixel size to rem foroutput, assuming a 16px root size (the default in graphical browsers). Becausewe use rem for font sizing all of our declared sizes are really just suggestionsand the end user can resize as they see fit. Text sizes are always variable sodesign accordingly.
There are many subgroups of slab serif fonts, including Antique, Clarendon, Italienne, and Geometric models, and Typewriter typefaces. Typewriter slab serifs are named for their use in strike-on typewriting.
This is just the start and we are keen to add to the range of fonts and languages available. We would love input on this from Scribers all over the world so please comment below with your suggestions and the more detail you can provide on why the font or language you need would be useful, the better! If you can include a link to the font from as well that will make sure there is no confusion
What fonts support my language?
We have a handy help page which shows all the fonts and which languages - Supported languages and fonts and this will be updated as and when new fonts/languages are added. We also have a blog post on the inital 60 fonts that shows examples of the options for the new languages - Choosing the best fonts for our supported languages