Fonts: Difference between revisions
add resource and installation info |
m Text replacement - "<(\/?)source" to "<$1syntaxhighlight" |
||
| (2 intermediate revisions by one other user not shown) | |||
| Line 31: | Line 31: | ||
** <code>apt-cache search "((otf|ttf)-)|(woff)"</code> | ** <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 | ** <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. | # 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. | ||
| Line 43: | Line 45: | ||
== Adding Fonts to stock Ubuntu == | == 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). | 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. | Fonts are disk hungry. This list of fonts packages will use about 222MB of disk space by including a total of 101 packages. | ||
| Line 54: | Line 56: | ||
* ubuntustudio-fonts (collection to help with graphic design, including non-free and jsMath, etc.) | * ubuntustudio-fonts (collection to help with graphic design, including non-free and jsMath, etc.) | ||
You can install all these fonts with | You can install all these fonts with | ||
< | <syntaxhighlight 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</syntaxhighlight> | ||
| Line 65: | 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 72: | 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 | ||
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: | ||
< | <syntaxhighlight lang="bash">sudo apt-get install ttf-adf-gillius</syntaxhighlight> | ||
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 | 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 | ||
| Line 99: | Line 100: | ||
==== CSS ==== | ==== CSS ==== | ||
< | <syntaxhighlight lang="css"> | ||
/** Declare the @font-face rules */ | /** Declare the @font-face rules */ | ||
@font-face { | @font-face { | ||
| Line 114: | Line 115: | ||
font-family: gillius-adf; | font-family: gillius-adf; | ||
} | } | ||
</ | </syntaxhighlight> | ||
Now with either <pre> | Now with either <pre> | ||