Bureaucrats, confirmed, Administrators
4,558
edits
Changes
expanded with examples of using Web Fonts and custom fonts
* freedom to do all of these things commercially as it is about freedom, not price.
</blockquote>
You can read more about Font Standards at https://www.w3.org/TR/css-fonts-3/ and in general at [[wp:Font]]
== Licensing ==
Since fonts are so intertwined with linguistics, it's no surprise that [[wp:SIL Open Font License|SIL International has an open font license]]
== Availability ==
# [http://genericons.com/ Genericons] is a free, GPL, flexible icon font for the web
# See also [[wp:Free software Unicode typefaces|Free software Unicode typefaces]]
# We chose the [[wp:Linux Libertine|Linux Libertine]] font for our logo, and it turns out that a lot of people like this font. It's a free replacement for Times New Roman . See [[Style Guide]] for more about {{CompanyName}} font usage.
[[File:Eqt.logo.png|thumbnail|Linux Libertine]]
== Font Artists ==
We've all doodled with pencil and paper to make letters and Mother's Day cards. Some people still do it. The leading free software for people who want to develop fonts is FontForge https://fontforge.github.io/
== Embedding Fonts ==
The so-called 'Web Safe Fonts' (meaning those installed by a majority of operating system variants) is pretty boring. The list is essentially Sans-serif: Arial, Tahoma, Verdana; Serif: Palatino, Times new Roman; Monospaced: Courier New <ref>http://www.cssfontstack.com/</ref>. If you want to move beyond those fonts and still provide the same look to 90-100% of your website visitors then you will need to "embed" the fonts in your website. It's great to have free fonts because you have the distribution rights. The problem with using free fonts on your webpage is that some people don't use a free operating system, and won't have the free fonts installed. You can use a service like [https://fonts.google.com/ Google Fonts] if they offer the font you want to use. Google doesn't offer Gillius or Linux Libertine.
Note that many font technologies have come and gone (TrueType, OpenType, etc.). The latest standard (2012) is '[https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF WOFF]' (and WOFF File Format 2.0 March 2016) developed by the Mozilla Foundation. It's where all the browsers are.
=== Gillius ADF ===
Gillius comes from the Arkandis Digital Foundry (ADF). A nice page to see the font in action, with all it's variants is at http://www.1001fonts.com/gillius-adf-font.html
==== Downloads / Installation ====
You can download it from https://arkandis.tuxfamily.org/adffonts.html. If you're running Linux, it's probably already included in your distribution, and installed by default. If it's not installed, you can simply:
<source lang="bash">sudo apt-get install ttf-adf-gillius</source>
You actually end up with quite a few files due to the fact that there is a Number 2 and each comes in every combination of Regular, Condensed, Bold and Italics
<pre>
/usr/share/fonts/truetype/adf/GilliusADFNo2Cd-Regular.otf
/usr/share/fonts/truetype/adf/GilliusADFNo2-Regular.otf
/usr/share/fonts/truetype/adf/GilliusADFNo2-BoldItalic.otf
/usr/share/fonts/truetype/adf/GilliusADFNo2Cd-Bold.otf
/usr/share/fonts/truetype/adf/GilliusADFNo2Cd-Italic.otf
/usr/share/fonts/truetype/adf/GilliusADFNo2-Bold.otf
/usr/share/fonts/truetype/adf/GilliusADFNo2-Italic.otf
/usr/share/fonts/truetype/adf/GilliusADFNo2Cd-BoldItalic.otf
/usr/share/fonts/truetype/adf/GilliusADF-BoldItalic.otf
/usr/share/fonts/truetype/adf/GilliusADF-Bold.otf
/usr/share/fonts/truetype/adf/GilliusADFCd-Italic.otf
/usr/share/fonts/truetype/adf/GilliusADFCd-BoldItalic.otf
/usr/share/fonts/truetype/adf/GilliusADFCd-Regular.otf
/usr/share/fonts/truetype/adf/GilliusADFCd-Bold.otf
/usr/share/fonts/truetype/adf/GilliusADF-Italic.otf
/usr/share/fonts/truetype/adf/GilliusADF-Regular.otf
</pre>
But none of these is in '''WOFF''' format, so with the woff-tools package, you can <code>sudo sfnt2woff /usr/share/fonts/truetype/adf/GilliusADF-Regular.otf</code> which will create a woff version in the same directory as the source .otf file.
==== CSS ====
<source lang="css">
/** Declare the @font-face rules */
@font-face {
font-family: 'gillius-adf', gillius-sans, sans-serif;
local: 'gillius adf';
local: 'gillius ADF';
src: url('/usr/share/fonts/truetype/adf/GilliusADF-Regular.woff') format('woff');
src: url('/usr/share/fonts/truetype/adf/GilliusADF-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
/** declare a class to apply the font-family */
.slogan {
font-family: gillius-adf;
}
</source>
Now with either <pre>
<div class="slogan">foo</div>
or
<div style="font-family:gillius ADF;">foo</div>
</pre>
You'll get the intended results. Your website visitors will see the font that you intended.
<span style="font-family:gillius ADF;font-size:2em;">Gillius ADF: enterprise quality = technology freedom</span>
Note that in MediaWiki, you can define rules in MediaWiki:Common.css <ref>[[mw:Manual:CSS]]</ref>, or develop your own skin <re
== Icons as Fonts ==
So many people have been using icons in their webpages that entire fonts have been designed to make it 'easier' to just use a font as a pool for icons. [[FontAwesome]] comes to mind. In fact, the developer of FontAwesome raised over $1 million in a kickstarter campaign for version 5. Chris Coyier lays out some contrasts in his '[https://css-tricks.com/icon-fonts-vs-svg/ Inline SVG vs Icon Fonts Cagematch]' The result there favors SVG, however, his [https://css-tricks.com/examples/IconFont/ IconFont] page lays out the clear advantages of using a font. Font technology has standardized on WOFF rather than SVG fonts because WOFF (and others) support SVG glyphs in the font specification ("it's in there"). Do not confuse this with generic use of an SVG in graphics situations. All modern browsers support SVG graphics<ref>http://caniuse.com/#feat=svg</ref>
{{References}}
[[Category:Fonts]]
[[Category:UI]]