DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:fontface

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
plugin:fontface [2012-04-08 09:05] 68.81.46.87plugin:fontface [2024-01-21 19:08] (current) – works in latest version ach
Line 2: Line 2:
  
 ---- plugin ---- ---- plugin ----
-description: Embed a special font for headlines (with either @font-face, Google Font API, Kernest, Cufón, typeface.js or sIFR)+description: Embed fonts (via uploaded fonts or Google Fonts)
 author     : Anika Henke  author     : Anika Henke 
 email      : anika@selfthinker.org  email      : anika@selfthinker.org 
 type       : action  type       : action 
-lastupdate : 2011-05-22 +lastupdate : 2016-04-06 
-compatible : 2008-05-05, 2009-02-14, 2009-12-25 "Lemming"2010-11-07 "Anteater"2011-05-25 "Rincewind", Angua+compatible : Lemming, Anteater, Rincewind, Angua, Adora Belle, Weatherwax, Binky, Ponder Stibbons, Hrun, Detritus, Elenor of Tsort, Frusterick Manners, Greebo, !Hogfather, 2023-04-04
 depends    :  depends    : 
 conflicts  conflicts 
Line 22: Line 22:
 ===== Installation ===== ===== Installation =====
  
-Install the plugin using the [[plugin:plugin|Plugin Manager]] and the download URL above, which points to latest version of the plugin. Refer to [[:Plugins]] on how to install plugins manually.+Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.
  
-:!: **External requirements:** The used font needs to be **uploaded** into the plugin's **"./fonts/"** directory first+:!: **External requirements:** If you're not using a Google Font, then the used font needs to be **uploaded** into the plugin's **"./fonts/"** directory first.
-The font files that need to be uploaded depend on the embedding technique you use.+
  
 To help you decide on the technique, see [[http://socialcompare.com/en/comparison/comparison-of-web-fonts-solutions|Comparison of web fonts solutions on SocialCompare.com]] To help you decide on the technique, see [[http://socialcompare.com/en/comparison/comparison-of-web-fonts-solutions|Comparison of web fonts solutions on SocialCompare.com]]
  
-==== @font-face ====+==== Uploaded fonts (@font-face====
  
-You need four files to accomodate for all different browsers:+You need to upload at least two files into the plugin's "fonts" directory to accommodate the majority of all the different browsers:
  
-  * <fontFile>.eot 
-  * <fontFile>.woff 
   * <fontFile>.ttf   * <fontFile>.ttf
 +  * <fontFile>.woff
 +
 +Optionally you can also add:
 +
 +  * <fontFile>.eot
   * <fontFile>.svg   * <fontFile>.svg
 +  * <fontFile>.woff2
  
 Here you will find ready-made font packages which will already contain all four of them: Here you will find ready-made font packages which will already contain all four of them:
 http://www.fontsquirrel.com/fontface http://www.fontsquirrel.com/fontface
  
-==== Google Font API ====+==== Google Fonts ====
  
 You don't need to upload any files. You can use any of the fonts listed here: You don't need to upload any files. You can use any of the fonts listed here:
Line 47: Line 50:
  
 You can add variants into the "fontFile" option, e.g. 'Expletus+Sans:regular,bold'. You can add variants into the "fontFile" option, e.g. 'Expletus+Sans:regular,bold'.
- 
-==== Kernest ==== 
- 
-You don't need to upload any files. You can use any of the fonts listed here: 
-http://kernest.com/ 
- 
-==== Cufón ==== 
- 
-The file you need to upload: 
- 
-  * <fontFile>.font.js 
- 
-You can generate that file here: 
-http://cufon.shoqolate.com/generate/ 
- 
-==== typeface.js ==== 
- 
-The file you need to upload: 
- 
-  * <fontFile>.typeface.js 
- 
-You can convert fonts here: 
-http://typeface.neocracy.org/fonts.html 
- 
-Be aware of choosing the correct variant of the font. 
-If your headings are bold and you choose the regular variant, this technique won't work. 
- 
-==== sIFR ==== 
- 
-The file you need to upload: 
- 
-  * <fontFile>.swf 
- 
-You can create that file here: 
-http://www.sifrgenerator.com/ 
  
  
 ===== Configuration and Settings ===== ===== Configuration and Settings =====
  
-  * **''technique''**: Font embedding technique, with a choice of 'fontface' (@font-face)'google' (Google Font API), 'kernest', 'cufon', 'typeface' and 'sifr' +  * **''technique''**: Font embedding technique, with a choice of 'fontface' (Uploaded fontsand 'google' (Google Fonts
-  * **''fontFile''**: Font file name (without extension; **needs to be uploaded first**, [[#installation|see instructions]]) +  * **''fontFile''**: Font file name (for uploaded fonts: without extension; for Google fonts: what comes after "''?family=''", [[#installation|see instructions]]) 
-  * **''fontName''**: Font name (as used in CSS; not needed for Cufón and sIFR+  * **''fontName''**: Font name (as used in CSS) 
-  * **''headings''**: Which headings should be affected? (needed for Cufón and sIFR or when styles should be automatically added) +  * **''elements''**: For which elements should the font be used? (comma separated, not needed when font is used in other CSS files)
-  * **''addStyles''**: Add styles automatically? (Styles for Cufón and sIFR are always added automatically, the others can be used as usual in your CSS files)+
   * **''genericFamily''**: Generic font family (serif, sans-serif, monospace, cursive, fantasy)   * **''genericFamily''**: Generic font family (serif, sans-serif, monospace, cursive, fantasy)
 +  * **''fontFile2''**: Second font file name
 +  * **''fontName2''**: Second font name
 +  * **''elements2''**: For which elements should the second font be used?
 +  * **''genericFamily2''**: Second generic font family
  
 +Go Admin menu > Configuration manager > Font face > Do your changes > Save.
 ===== Development ===== ===== Development =====
  
 ==== Change Log ==== ==== Change Log ====
  
-{{rss>http://github.com/feeds/selfthinker/commits/dokuwiki_plugin_fontface/master date}}+{{rss>https://github.com/selfthinker/dokuwiki_plugin_fontface/commits/master.atom date}}
  
 ==== Known Bugs and Issues & ToDo/Wish List ==== ==== Known Bugs and Issues & ToDo/Wish List ====
  
-Have a look at [[http://github.com/selfthinker/dokuwiki_plugin_fontface/issues?label=bug|bugs]], [[http://github.com/selfthinker/dokuwiki_plugin_fontface/issues?label=feature|feature requests]] and [[http://github.com/selfthinker/dokuwiki_plugin_fontface/issues?label=todo|ToDos]] in the bug tracker.+Have a look at [[https://github.com/selfthinker/dokuwiki_plugin_fontface/issues?label=bug|bugs]], [[https://github.com/selfthinker/dokuwiki_plugin_fontface/issues?label=feature|feature requests]] and [[https://github.com/selfthinker/dokuwiki_plugin_fontface/issues?label=todo|ToDos]] in the bug tracker.
  
  
Line 109: Line 80:
 Before reporting any issues (bugs or requests), please first take a look at the [[faq:pluginproblems|FAQ on plugin problems]]. Before reporting any issues (bugs or requests), please first take a look at the [[faq:pluginproblems|FAQ on plugin problems]].
  
-You can report any issues either on the [[http://github.com/selfthinker/dokuwiki_plugin_fontface/issues|Issue Tracker]] or here in this section.+You can report any issues either on the [[https://github.com/selfthinker/dokuwiki_plugin_fontface/issues|Issue Tracker]] or here in this section.
 ---- ----
 Having some trouble getting this working 100% with Google Ubuntu font. These are my settings:\\ Having some trouble getting this working 100% with Google Ubuntu font. These are my settings:\\
Line 125: Line 96:
 > fontName: ''Ubuntu'' > fontName: ''Ubuntu''
 >  --- [[user>ach|Anika Henke]] //2011/08/06 12:46// >  --- [[user>ach|Anika Henke]] //2011/08/06 12:46//
 +>> I have now clarified the config options in the config manager (and on this page). --- [[user>ach|Anika Henke]] //2015-04-05 15:33//
 +
 +How can i use https://fonts.googleapis.com/earlyaccess/scheherazade.css
 +> Early access Google fonts are currently not supported, sorry. You could add it yourself to the ''meta.html'' file (if your template supports that). --- [[user>ach|Anika Henke]] //2015-04-05 15:33//
 +
 +possible bug - fonts are being served from local plugin directory. When 1st going to my site, the fonts don't load (start.txt) page. But when you navigate to another page, they load fine and then will also load on the start.txt page. Might be an issue with other items getting loaded into the browser before the fonts?
 +www.james-johnson.net site name & p.claim should load as fonts from the font directory.
  
-//Italic Text//====== Headline ====== +> I have the same problem. I use https://gtmetrix.com to check the performance of site and I see this issue that some .woff fonts not loaded. I have this warning: The following requests are returning 404/410 responses. Either fix the broken links, or remove the references to the non-existent resources. It seems there is a problem with plugin!  --- [[user>atronoush|atronoush]] //2015-09-11 14:36//
-====== Headline ====== +
-====== Headline ====== +
-====== Headline ======+
  
 +>> I cannot reproduce this locally. And I cannot check the above URL as it doesn't use DokuWiki anymore. Do you have any URL you can share where this issue appears? --- [[user>ach|Anika Henke]] //2016-04-06 21:01//
plugin/fontface.1333868732.txt.gz · Last modified: 2012-04-08 09:05 by 68.81.46.87

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki