Browser can't find/doesn't display fonts

Support Themes & Styling
1

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? :thinking:

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

Thank you for your time!
Anna~

2

Oh Goddess I think I was pretty tired last night. I simply got the path wrong – I put the fonts in another subfolder which I don’t normally do, and that actually threw me in a loop! :laughing: So remember to triple-check your paths kids… :wink:

1 Like
3

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

4

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

5

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

6

@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
    @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.

7

@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:
    @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:
    $base-font-family: Monoton, serif !default;

@import "../../quark/scss/spectre";
  • Now both files need to be compiled:
    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.

8

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)