Not logged in. · Lost password · Register
Forum: General Help and Support Templates and Layout RSS
Change default font
Avatar
mcclt #1
Member for 3 months · 4 posts
Group memberships: Members
Show profile · Link to this post
Subject: Change default font
I just installed Dokuwiki latest version.

I also installed some plugins: googlefont, fontface, fontfamily.

But I can not change default font.

I tried to create the file userstyle.css in folder "www\dokuwiki\conf" with content:

body
{
    font-family: Linotte,sans-serif;
}

I also downloaded the font (https://befonts.com/download/linotte) and copied to folder "www\dokuwiki\lib\plugins\fontface\fonts".

But nothing changed.

Anyone can help me?
Avatar
Michaelsy #2
Member since Jun 2015 · 969 posts · Location: Düsseldorf, Germany
Group memberships: Members
Show profile · Link to this post
You have to define at least one @font-face rule.
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Example:
@font-face{
    font-family: 'Source Sans Pro';
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
    src: url('lib/webfonts/source-sans-pro/EOT/SourceSansPro-ExtraLight.eot') format('embedded-opentype'),
         url('lib/webfonts/source-sans-pro/WOFF2/TTF/SourceSansPro-ExtraLight.ttf.woff2') format('woff2'),
         url('lib/webfonts/source-sans-pro/WOFF/OTF/SourceSansPro-ExtraLight.otf.woff') format('woff'),
         url('lib/webfonts/source-sans-pro/OTF/SourceSansPro-ExtraLight.otf') format('opentype'),
         url('lib/webfonts/source-sans-pro/TTF/SourceSansPro-ExtraLight.ttf') format('truetype');
}

In general, one defines several such font-faces to cover several font-weights and font-styles.

(This method does not require the plugins you mentioned, which I do not use and therefore I do not know their exact functions.)

HTH - Michael Sy.
By Patreon.com a few eurons can be fed into the code phasers of
the DokuWiki engine. Besides, Andi's posts are worth reading.
Avatar
mcclt #3
Member for 3 months · 4 posts
Group memberships: Members
Show profile · Link to this post
I am a newbie. So it is hard for me to understand your guide.

Do I need to define the font face rule in the file userstyle.css?
Avatar
Michaelsy #4
Member since Jun 2015 · 969 posts · Location: Düsseldorf, Germany
Group memberships: Members
Show profile · Link to this post
Quote by mcclt:
Do I need to define the font face rule in the file userstyle.css?
There are other options, but that's the easiest.

Quote by mcclt:
I am a newbie.
I do not recommend using Linotte, as it does not appear to be a free font (except for the semibold variant).
https://www.fontsquirrel.com/fonts/linotte
https://www.myfonts.com/fonts/jcfonts/linotte/

Alternative rounded fonts:
https://www.fontsquirrel.com/fonts/blogger-sans
https://www.fontsquirrel.com/fonts/dosis
By Patreon.com a few eurons can be fed into the code phasers of
the DokuWiki engine. Besides, Andi's posts are worth reading.
This post was edited 2 times, last on 2019-06-21, 08:13 by Michaelsy.
Avatar
ach (Administrator) #5
Member since May 2006 · 1932 posts · Location: Folkestone, UK
Group memberships: Administrators, Members, Super Mods, Wiki Managers
Show profile · Link to this post
You don't need to do anything that complicated, at least not with the FontFace plugin. It does all of that for you, and I assume that at least the googlefont plugin will do the same.
If your configuration of those plugins is correct, maybe it's an issue with caching? See here how to purge the cache.
Avatar
mcclt #6
Member for 3 months · 4 posts
Group memberships: Members
Show profile · Link to this post
Thanks for your help.

I changed the font successfully by modifying the file userstyle.css +download the font and use exact path:

body
{
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

But when I modify something in FontFacePlugin and save the configuration, it makes something wrong and can not load the page. I have to reserve to the last version.
Avatar
ach (Administrator) #7
Member since May 2006 · 1932 posts · Location: Folkestone, UK
Group memberships: Administrators, Members, Super Mods, Wiki Managers
Show profile · Link to this post
Just remove the FontFace Plugin. You don't need it when you've added all that manually.
Avatar
mcclt #8
Member for 3 months · 4 posts
Group memberships: Members
Show profile · Link to this post
I need to configure FontFace plugin for other user.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-09-23, 15:57:46 (UTC +02:00)