Difference between revisions of "Fonts"

From Freephile Wiki
Jump to navigation Jump to search
VisualWikitext
m
(Add ref to askubuntu)
 
(8 intermediate revisions by the same user not shown)
Line 25: Line 25:
 
== Availability ==
 
== Availability ==
  
−
There are a lot of free fonts out there.  For example, see John Strake's [http://www.thibault.org/fonts/essays/ Essays 1743 font] which was used in typesetting [http://diveintohtml5.info/index.html Dive Into HTML 5]  Back in the old days, if you used Linux, you'd have to get the Microsoft Core Fonts separately from the operating system because although the fonts were not sold, they could not be distributed.
+
There are a lot of free fonts out there.  For example, see John Strake's [http://www.thibault.org/fonts/essays/ Essays 1743 font] which was used in typesetting [http://diveintohtml5.info/index.html Dive Into HTML 5]  Back in the old days, if you used Linux, you'd have to get the Microsoft Core Fonts separately from the operating system because although the fonts were not sold, they could not be distributed.  
  
−
# The [https://fedorahosted.org/liberation-fonts/ Liberation Fonts], initially released in 2007, is a font family which aims at metric compatibility with Arial, Times New Roman, and Courier New. It is sponsored by [[Red Hat]].  They are included in most Linux distributions.
+
* Check  https://www.fontsquirrel.com/ for fonts you want
 +
* Check your package manager for fonts
 +
** <code>apt-cache search "((otf|ttf)-)|(woff)"</code>
 +
** <code>apt-cache search "woff" --full</code> shows same results as <code>apt-cache show</code> for each found package
 +
 
 +
=== Freely licensed Fonts ===
 +
 
 +
# The [https://fedorahosted.org/liberation-fonts/ Liberation Fonts], initially released in 2007, is a font family which aims at metric compatibility with '''Arial, Times New Roman, and Courier New'''. It is sponsored by [[Red Hat]].  They are included in most Linux distributions.
 
# [https://www.gnu.org/software/freefont/index.html FreeFont by GNU]
 
# [https://www.gnu.org/software/freefont/index.html FreeFont by GNU]
 
# [[wp:Ubuntu_(typeface)]] is a family of fonts created by Canonical [https://wiki.ubuntu.com/Ubuntu%20Font%20Family https://wiki.ubuntu.com/Ubuntu Font Family]
 
# [[wp:Ubuntu_(typeface)]] is a family of fonts created by Canonical [https://wiki.ubuntu.com/Ubuntu%20Font%20Family https://wiki.ubuntu.com/Ubuntu Font Family]
Line 36: Line 43:
 
# 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.
 
# 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]]
 
[[File:Eqt.logo.png|thumbnail|Linux Libertine]]
 +
 +
== Adding Fonts to stock Ubuntu ==
 +
If you don't add some fonts to your stock Ubuntu, then you won't be able to view many PDF documents, Word documents and even webpages ''the way they were designed (using fonts found on Microsoft Windows or Apple Macs)''.  So, here's how you install fonts in Ubuntu<ref>https://askubuntu.com/questions/3697/how-do-i-install-fonts</ref>.
 +
 +
Fonts are disk hungry. This list of fonts packages will use about 222MB of disk space by including a total of 101 packages.
 +
* ttf-mscorefonts-installer (installs Microsoft TrueType core fonts)
 +
* edubuntu-fonts (many fonts)
 +
* fonts-font-awesome (icons)
 +
* fonts-octicons (github icons)
 +
* fonts-hack-otf fonts-hack-ttf fonts-hack-web (font suitable for source code)
 +
* fonts-oxygen (KDE)
 +
* ubuntustudio-fonts (collection to help with graphic design, including non-free and jsMath, etc.)
 +
You can install all these fonts with
 +
<source lang="bash">sudo apt-get update && sudo apt-get install ttf-mscorefonts-installer edubuntu-fonts fonts-font-awesome fonts-octicons fonts-hack-otf fonts-hack-ttf fonts-hack-web fonts-oxygen ubuntustudio-fonts</source>
 +
 +
 +
Alternately, you can simply put font files into /usr/local/share/fonts to install them system-wide. Run
 +
* <code>sudo fc-cache -fv</code> to regenerate the systemwide font caches, verbosely, forcing re-generation of apparently up-to-date cache files, overriding the timestamp checking.
 +
* <code>sudo fc-list hack</code> List fonts matching 'hack' to verify installation
  
 
== Font Artists ==
 
== Font Artists ==
Line 41: Line 67:
  
 
== Embedding Fonts ==
 
== 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.
+
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. Also, using a third-party server, although convenient, comes with costs or disadvantages (e.g. privacy). Since embedding fonts is easy to do, why not just create an obedient and faithful server which has the fonts?  We'll give an example using '''Gillius ADF'''
  
 
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.
 
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.
Line 48: Line 74:
 
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
 
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:
 
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>
 
<source lang="bash">sudo apt-get install ttf-adf-gillius</source>
Line 78: Line 103:
 
/** Declare the @font-face rules */
 
/** Declare the @font-face rules */
 
@font-face {
 
@font-face {
−
   font-family: 'gillius-adf', gillius-sans, sans-serif;
+
   font-family: 'gillius-adf', gillius-sans, sans-serif; /* with fallbacks */
−
   local: 'gillius adf';
+
   src: local ('gillius adf'),
−
  local: 'gillius ADF';
+
        local ('gillius ADF',
−
  src: url('/usr/share/fonts/truetype/adf/GilliusADF-Regular.woff') format('woff');
+
        url('/usr/share/fonts/truetype/adf/GilliusADF-Regular.woff') format('woff'),
−
  src: url('/usr/share/fonts/truetype/adf/GilliusADF-Regular.otf') format('opentype');
+
        url('/usr/share/fonts/truetype/adf/GilliusADF-Regular.otf') format('opentype');
 
   font-weight: normal;
 
   font-weight: normal;
 
   font-style: normal;
 
   font-style: normal;
Line 95: Line 120:
 
<div class="slogan">foo</div>
 
<div class="slogan">foo</div>
 
or  
 
or  
−
<div style="font-family:gillius ADF;">foo</div>
+
<div style="font-family:gillius-adf;">foo</div>
 
</pre>
 
</pre>
 
You'll get the intended results.  Your website visitors will see the font that you intended.
 
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>
+
e.g.
 +
<span class="slogan" style="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.
 
Note that in MediaWiki, you can define rules in [[MediaWiki:Common.css]] <ref>[[mw:Manual:CSS]]</ref>, or develop your own skin.
Line 110: Line 136:
 
[[Category:Fonts]]
 
[[Category:Fonts]]
 
[[Category:UI]]
 
[[Category:UI]]
 +
[[Category:Wiki]]

Latest revision as of 09:28, 24 September 2018

Freedom Fonts

Fonts are an interesting creature. We hardly consider them when using a computer. Yet, without a font to represent the text and information in a computer, the machine would be a box of plastic, metal and glass. Thus free fonts are essential to free computing.

Paraphrasing from the Open Font Library[1]

Libre/open fonts are about FREEDOM, not price.

They are fonts that preserve and protect your:

  • freedom to use for any purpose
  • freedom to study how they were made
  • freedom to improve
  • freedom to redistribute, both exact and improved copies
  • freedom to embed, subset, bundle and derive from to create any kind of artwork or document
  • freedom to do all of these things commercially as it is about freedom, not price.

You can read more about Font Standards at https://www.w3.org/TR/css-fonts-3/ and in general at wp:Font

Licensing[edit | edit source]

In 2005, David "Novalis" Turner of the FSF created the "font exception" to the GPL license to deal with fonts [2][3]

Since fonts are so intertwined with linguistics, it's no surprise that SIL International has an open font license

Availability[edit | edit source]

There are a lot of free fonts out there. For example, see John Strake's Essays 1743 font which was used in typesetting Dive Into HTML 5 Back in the old days, if you used Linux, you'd have to get the Microsoft Core Fonts separately from the operating system because although the fonts were not sold, they could not be distributed.

  • Check https://www.fontsquirrel.com/ for fonts you want
  • Check your package manager for fonts
    • apt-cache search "((otf|ttf)-)|(woff)"
    • apt-cache search "woff" --full shows same results as apt-cache show for each found package

Freely licensed Fonts[edit | edit source]

  1. The Liberation Fonts, initially released in 2007, is a font family which aims at metric compatibility with Arial, Times New Roman, and Courier New. It is sponsored by Red Hat. They are included in most Linux distributions.
  2. FreeFont by GNU
  3. wp:Ubuntu_(typeface) is a family of fonts created by Canonical https://wiki.ubuntu.com/Ubuntu Font Family
  4. The Open Font Library is a sister project to OpenClipArt and the Libre Graphics project http://openfontlibrary.org/
  5. With the ever-increasing phenomenon of software as a service (from "the cloud") Google Fonts (formerly Google Web Fonts) is one method for sourcing fonts for online use https://www.google.com/fonts
  6. Genericons is a free, GPL, flexible icon font for the web
  7. See also Free software Unicode typefaces
  8. We chose the 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 eQuality Technology font usage.
Linux Libertine

Adding Fonts to stock Ubuntu[edit | edit source]

If you don't add some fonts to your stock Ubuntu, then you won't be able to view many PDF documents, Word documents and even webpages the way they were designed (using fonts found on Microsoft Windows or Apple Macs). So, here's how you install fonts in Ubuntu[4].

Fonts are disk hungry. This list of fonts packages will use about 222MB of disk space by including a total of 101 packages.

  • ttf-mscorefonts-installer (installs Microsoft TrueType core fonts)
  • edubuntu-fonts (many fonts)
  • fonts-font-awesome (icons)
  • fonts-octicons (github icons)
  • fonts-hack-otf fonts-hack-ttf fonts-hack-web (font suitable for source code)
  • fonts-oxygen (KDE)
  • ubuntustudio-fonts (collection to help with graphic design, including non-free and jsMath, etc.)

You can install all these fonts with 

sudo apt-get update && sudo apt-get install ttf-mscorefonts-installer edubuntu-fonts fonts-font-awesome fonts-octicons fonts-hack-otf fonts-hack-ttf fonts-hack-web fonts-oxygen ubuntustudio-fonts


Alternately, you can simply put font files into /usr/local/share/fonts to install them system-wide. Run

  • sudo fc-cache -fv to regenerate the systemwide font caches, verbosely, forcing re-generation of apparently up-to-date cache files, overriding the timestamp checking.
  • sudo fc-list hack List fonts matching 'hack' to verify installation

Font Artists[edit | edit source]

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[edit | edit source]

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 [5]. 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 Google Fonts if they offer the font you want to use. Google doesn't offer Gillius or Linux Libertine. Also, using a third-party server, although convenient, comes with costs or disadvantages (e.g. privacy). Since embedding fonts is easy to do, why not just create an obedient and faithful server which has the fonts? We'll give an example using Gillius ADF

Note that many font technologies have come and gone (TrueType, OpenType, etc.). The latest standard (2012) is 'WOFF' (and WOFF File Format 2.0 March 2016) developed by the Mozilla Foundation. It's where all the browsers are.

Gillius ADF[edit | edit source]

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

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: 

sudo apt-get install ttf-adf-gillius

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 

/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

But none of these is in WOFF format, so with the woff-tools package, you can sudo sfnt2woff /usr/share/fonts/truetype/adf/GilliusADF-Regular.otf which will create a woff version in the same directory as the source .otf file.

CSS[edit | edit source]

/** Declare the @font-face rules */
@font-face {
  font-family: 'gillius-adf', gillius-sans, sans-serif; /* with fallbacks */
  src: local  ('gillius adf'),
         local ('gillius ADF',
         url('/usr/share/fonts/truetype/adf/GilliusADF-Regular.woff') format('woff'),
         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;
}

Now with either 

<div class="slogan">foo</div>
or 
<div style="font-family:gillius-adf;">foo</div>

You'll get the intended results. Your website visitors will see the font that you intended.

e.g. Gillius ADF: enterprise quality = technology freedom

Note that in MediaWiki, you can define rules in MediaWiki:Common.css [6], or develop your own skin.

Icons as Fonts[edit | edit source]

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 'Inline SVG vs Icon Fonts Cagematch' The result there favors SVG, however, his 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[7]

References[edit source]

  1. ↑ http://openfontlibrary.org/en/guidebook/libre_open_fonts
  2. ↑ https://www.fsf.org/blogs/licensing/20050425novalis
  3. ↑ https://en.wikipedia.org/wiki/GPL_font_exception
  4. ↑ https://askubuntu.com/questions/3697/how-do-i-install-fonts
  5. ↑ http://www.cssfontstack.com/
  6. ↑ mw:Manual:CSS
  7. ↑ http://caniuse.com/#feat=svg

Free Software Foundation. fsf.org

General Public License = A sane copyright license

Portable Document Format = a widely used standard for representing documents electronically and print. PDF

Web Open Font Format

Cascading Style Sheets = A technology that deals with the presentation of content on the web

Retrieved from "https://wiki.freephile.org/wiki/index.php?title=Fonts&oldid=9190"