I'm trying to change the headers and body fonts of HTML exported from org files. The idea is to have Bebas Neue for headers and Lato for body (both are available through Google fonts).

first I associated my org file to a customized CSS file I found:

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="./assets/style.css"/>

Then I added/replaced the following blocks to the CSS :

Google font import

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

Font variables setting

@import "normalize";
@import "htmlize";
$bebas: 'Bebas Neue', cursive;
$lato: 'Lato', sans-serif;
$monospace: Lucida Console, monospace;
$code-size: 80%;
$smaller: 90%;
$max-width: 710px;


body {
    width: 95%;
    margin: 2% auto;
    font-size: 14px;
    line-height: 1.4em;
    font-family: $lato;
    color: #333;


h1,h2,h3,h4,h5,h6 {
    color: #A5573E;
    line-height: 1em;
    font-family: $bebas;
    text-transform: uppercase;

Fonts don't change at all and I don't understand why..

  • 1
    I'm no expert on this,but those variables in css look sass-like preprocessor stuff, so ignored if you don't process it before. Check your browser console, or dev tools.
    – Muihlinn
    Dec 28 '20 at 7:33
  • Indeed it works when I remove the variables. Thank you. Shall I remove the question?
    – crocefisso
    Dec 28 '20 at 10:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.