Browser can't find/doesn't display fonts

So I have some font declarations in my scss file like "src: url('../fonts/tillana-regular-webfont.woff') format('woff');", and I put the fonts in a folder named fonts right in my theme folder (the scss files reside in a folder called "scss", also right in my theme folder). So that should be okay?

I checked the quark theme and there it's just the same with the fonts folder in the same place and the declarations in line-awesome.min.css: "src:url(../fonts/line-awesome.eot?v=4.7.0);", and the icons show up alright – so why are my fonts not showing? 🤔

I checked the file permissions, but they're not the culprit. What else could it be?

Thank you for your time!
Anna~

Hello Netzhexe

wie und wo kann ich den Default Font von Quark ändern??
ich habe mal schon unter:
/home/www/user/themes/quark/Fonts
die neuen Fonts abgelegt.

welches der scss oder css ist dasjenige zum ändern des Fonts?
Gruß
siebenstein

@siebenstein Would your mind posting your question/answer in English so the entire community can benefit and/or help you? I would appreciate it.

how and where can i Change the deafult font of the Quark theme ??
i copied the new free font already under:
/home/www/user/themes/quark/Fonts

which of the scss or css is the Right one to Change the font ?
regards
siebenstein

@siebenstein There are several ways to customize a theme. Have a look at Customization in the Grav docs. It shows the different options.

The quick and dirty way for testing:

• Add the font files In /user/themes/quark/fonts
  For example Monoton-Regular.ttf
• Add the following in /user/themes/quark/css/custom.css
  CSSCopy

  @font-face {
   font-family: 'Monoton';
   font-style: normal;
   font-weight: 400;
   src: local('Monoton'), url(../fonts/Monoton-Regular.ttf);
  }
  h1 {
     font-family: 'Monoton', cursive;
  } 
  

Refresh the browser and have look.

Of course this should be done in a child theme of quark. See the docs on Theme Inheritance for step-by-step tutorial.

@siebenstein Using SCSS is a bit more tricky... You could do the following:

• Create a child theme using inheritance
• Add font files to /user/themes/mytheme/fonts
• In the child theme create folder /user/themes/mytheme/scss

• Inside /scss folder create file theme.scss with the following content:

  CSSCopy

  @font-face {
   font-family: 'Monoton';
   font-style: normal;
   font-weight: 400;
   src: local('Monoton'), url(../fonts/Monoton-Regular.ttf);
  }
  
  $base-font-family: Monoton, serif !default;
  
  @import '../../quark/scss/theme.scss';
  

• Also create file spectre.scss with the following content:

  TXTCopy

  $base-font-family: Monoton, serif !default;
  
  @import "../../quark/scss/spectre";
  
  

• Now both files need to be compiled:
  BASHCopy

  sudo apt install ruby-sass  // If not yet installed
  // Change directory to /user/themes/mytheme
  scss --force --update scss:css-compiled  // Compile all files in /scss into /css-compiled
  

  The browser should now display the new font.

Hi pamtbaau,

many thanks to your explanations.
i'm just edit the custom.css with follwing:

@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), url("../fonts/raleway-v12-latin-regular.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../fonts/raleway-v12-latin-regular.woff2?v=4.7.0") format ("woff2"), url("../fonts/raleway-v12-latin-regular.woff?v=4.7.0") format("woff"), url("../fonts/raleway-v12-latin-regular.ttf?v=4.7.0") format("truetype"), url ("../fonts/raleway-v12-latin-regular.svg?v=4.7.0#fontraleway-v12-latin-regular") format("svg");
}

body {
font-family: 'Raleway', cursive;
}
h1 {
font-family: 'Raleway', cursive;
}
h2 {
font-family: 'Raleway', cursive;
}
h3 {
font-family: 'Raleway', cursive;
}
h4 {
font-family: 'Raleway', cursive;
}
h5 {
font-family: 'Raleway', cursive;
}
h6 {
font-family: 'Raleway', cursive;
}

seems to be working..

cu
siebenstein (sevenstone)