asciidoctor-stylesheet-factory: specify default font

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|

asciidoctor-stylesheet-factory: specify default font

neontapir
I've been playing with the asciidoctor-stylesheet-factory to create a CSS file for my document. In my experimentation, I haven't found a variable that allows me to set

body {
  font-family: whatever
}

in the final CSS.

I've tried $body-font-family, but that sets font-family only in the #content class, which isn't used for default text. I took a quick look through the generated CSS files included with the stylesheet-factory project, and I wasn't able to find one that demonstrated this capability.

Is there such a variable?
Reply | Threaded
Open this post in threaded view
|

Re: asciidoctor-stylesheet-factory: specify default font

LightGuardjp
Have you tried $body-font-family? It's in the typography foundation scss file.


On Sat, Sep 14, 2013 at 7:05 PM, neontapir [via Asciidoctor :: Discussion] <[hidden email]> wrote:
I've been playing with the asciidoctor-stylesheet-factory to create a CSS file for my document. In my experimentation, I haven't found a variable that allows me to set

body {
  font-family: whatever
}

in the final CSS.

I've tried $body-font-family, but that sets font-family only in the #content class, which isn't used for default text. I took a quick look through the generated CSS files included with the stylesheet-factory project, and I wasn't able to find one that demonstrated this capability.

Is there such a variable?


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/asciidoctor-stylesheet-factory-specify-default-font-tp615.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Reply | Threaded
Open this post in threaded view
|

Re: asciidoctor-stylesheet-factory: specify default font

neontapir

Yrs, with no success.

On Sep 15, 2013 12:15 AM, "LightGuardjp [via Asciidoctor :: Discussion]" <[hidden email]> wrote:
Have you tried $body-font-family? It's in the typography foundation scss file.


On Sat, Sep 14, 2013 at 7:05 PM, neontapir [via Asciidoctor :: Discussion] <[hidden email]> wrote:
I've been playing with the asciidoctor-stylesheet-factory to create a CSS file for my document. In my experimentation, I haven't found a variable that allows me to set

body {
  font-family: whatever
}

in the final CSS.

I've tried $body-font-family, but that sets font-family only in the #content class, which isn't used for default text. I took a quick look through the generated CSS files included with the stylesheet-factory project, and I wasn't able to find one that demonstrated this capability.

Is there such a variable?


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/asciidoctor-stylesheet-factory-specify-default-font-tp615.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/asciidoctor-stylesheet-factory-specify-default-font-tp615p616.html
To unsubscribe from asciidoctor-stylesheet-factory: specify default font, click here.
NAML
Reply | Threaded
Open this post in threaded view
|

Re: asciidoctor-stylesheet-factory: specify default font

neontapir
Belay that. I was putting the variable declaration in the _xxx.scss file, not the xxx.scss file. I have it working now in the xxx.scss.

Thank you!
Reply | Threaded
Open this post in threaded view
|

Re: asciidoctor-stylesheet-factory: specify default font

mojavelinux
Administrator
I'm glad to hear it!

How I have the themes setup is definitely documentation that needs to be updated and more complete. In the meantime, I'll correct it here for those following along.

To create a theme, where <theme> is the name of your theme:

. create the file sass/<theme>.scss
. populate sass/<theme>.scss file with:
+
```scss
@import "settings/<theme>";
@import "components/asciidoc";
@import "components/awesome-icons";
```

. create the file sass/settings/_<theme>.scss (note the leading underscore!)
. populate sass/settings/_<theme>.scss with:
+
```scss
@import "defaults";

// uncomment to set the body font
// $body-font-family: Arial, serif;

// uncomment to set the main color, which is used for links
// $primary-color: #FF0000;

// see sass/settings/_defaults.scss and
// sass/settings/_settings.scss.dist to find out
// what other variables can be set
```

. compile using

 $ compass compile

. Find your stylesheet at stylesheets/<theme>.css

It's important to add the `import "defaults";` line at the top of the settings/_<theme>.scss file to make it all work.

I hope that helps!

-Dan


On Sun, Sep 15, 2013 at 11:32 AM, neontapir [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Belay that. I was putting the variable declaration in the _xxx.scss file, not the xxx.scss file. I have it working now in the xxx.scss.

Thank you!


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/asciidoctor-stylesheet-factory-specify-default-font-tp615p622.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Reply | Threaded
Open this post in threaded view
|

Re: asciidoctor-stylesheet-factory: specify default font

mojavelinux
Administrator
In reply to this post by neontapir
I forgot the final piece. Most of the styles come from the sass/components/_asciidoc.scss file. If there is something defined in that file that doesn't jive with your theme, or you want to customize, then you add overrides in the sass/<theme>.scss file *below* the imports.

-Dan


On Mon, Sep 16, 2013 at 8:35 PM, Dan Allen <[hidden email]> wrote:
I'm glad to hear it!

How I have the themes setup is definitely documentation that needs to be updated and more complete. In the meantime, I'll correct it here for those following along.

To create a theme, where <theme> is the name of your theme:

. create the file sass/<theme>.scss
. populate sass/<theme>.scss file with:
+
```scss
@import "settings/<theme>";
@import "components/asciidoc";
@import "components/awesome-icons";
```

. create the file sass/settings/_<theme>.scss (note the leading underscore!)
. populate sass/settings/_<theme>.scss with:
+
```scss
@import "defaults";

// uncomment to set the body font
// $body-font-family: Arial, serif;

// uncomment to set the main color, which is used for links
// $primary-color: #FF0000;

// see sass/settings/_defaults.scss and
// sass/settings/_settings.scss.dist to find out
// what other variables can be set
```

. compile using

 $ compass compile

. Find your stylesheet at stylesheets/<theme>.css

It's important to add the `import "defaults";` line at the top of the settings/_<theme>.scss file to make it all work.

I hope that helps!

-Dan


On Sun, Sep 15, 2013 at 11:32 AM, neontapir [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Belay that. I was putting the variable declaration in the _xxx.scss file, not the xxx.scss file. I have it working now in the xxx.scss.

Thank you!


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/asciidoctor-stylesheet-factory-specify-default-font-tp615p622.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--



--
Reply | Threaded
Open this post in threaded view
|

Re: asciidoctor-stylesheet-factory: specify default font

Paul Vickers
In reply to this post by neontapir
I'm new to asciidoctor and have found a behaviour that puzzles me.

If I run:
asciidoctor sample.adoc the resultant HTML has a different look to it than when I run
asciidoctor -a stylesheet=asciidoctor.css (copied from the stylesheets folder) or even
asciidoctor -a stylesheet=asciidoctor-default.css

I like the font from the first one better, but I need to use different icons from font-awesome for the admonition blocks, so I have been editing a copy of the asciidoctor-default.css file. However, the resultant body text is smaller than when no stylesheet is specified.

Can you point me to what I'm missing here?

Thanks. :-)
Reply | Threaded
Open this post in threaded view
|

Re: asciidoctor-stylesheet-factory: specify default font

Paul Vickers
Update

I noticed the following difference in the HTML generated by the two invocations of asciidoctor.

When I DON'T specificy a stylesheet:

asciidoctor sample.adoc

Then the HTML contains the following line:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic|Noto+Serif:400,400italic,700,700italic|Droid+Sans+Mono:400">

When I DO specifiy a style sheet:

asciidoctor -a stylesheet=asciidoctor.css

then the HTML doesn't contain that line. I assume, because I don't have Noto Serif installed on my system that the the line in question is dynamically loading it from google whilst the second version defaults to Times.

Is this a default that could be added to the stylesheet generator? How would you add it so that generated themes would create this line of HTML?
Reply | Threaded
Open this post in threaded view
|

Re: asciidoctor-stylesheet-factory: specify default font

Paul Vickers
Nevermind, I figured it out. I created scss files in the fonts folder for the three missing fonts and then put import directives into my custom theme scss.

Sorry to spam up your thread!

Reply | Threaded
Open this post in threaded view
|

Re: asciidoctor-stylesheet-factory: specify default font

aheusingfeld
Hi Paul,

it’s actually not spam! I also wondered why the font import

        //@import "fonts/metro";

is commented out in the "sass/asciidoctor.scss” file. The "sass/fonts/_metro.scss” contains exactly what you are searching for.

@Dan Is there a reason this line is commented out at the moment?

Cheers
Alex

Reply | Threaded
Open this post in threaded view
|

Re: asciidoctor-stylesheet-factory: specify default font

mojavelinux
Administrator
I agree wholeheartedly, this question is not spam at all. It's a great question that needs to be documented.

With the switch to custom fonts, I wanted to provide a way for people to disable the the remote import, just like we do with all remote assets we put into the document. In order to do that, I had to take the import statement out of the stylesheet and load it instead using a <link> element. This element is only added when you are using the default stylesheet, as you can see here:


It's also disabled if you explicitly unset the webfonts attribute:

 :webfonts!:

 You can also use the webfonts to load your own set of fonts, which is another possible solution here when you are using a customized version of the default stylesheet:

 :webfonts: Open+Sans:300,300italic,400,400italic,600,600italic|Noto+Serif:400,400italic,700,700italic|Droid+Sans+Mono:400

Since this issue is probably going to come up a lot, what I've done is add the @import statement to the top of the default stylesheet inside comments. That way, you can quickly enable them if you are using the stylesheet outside of Asciidoctor or as a custom stylesheet. See:


If you are using the stylesheet factory to build the default Asciidoctor stylesheet, I recommend the advice that Alex gave of uncommenting the font import in sass/asciidoctor.scss.

-Dan


On Sat, Aug 9, 2014 at 6:45 PM, aheusingfeld [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hi Paul,

it’s actually not spam! I also wondered why the font import

        //@import "fonts/metro";

is commented out in the "sass/asciidoctor.scss” file. The "sass/fonts/_metro.scss” contains exactly what you are searching for.

@Dan Is there a reason this line is commented out at the moment?

Cheers
Alex




If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/asciidoctor-stylesheet-factory-specify-default-font-tp615p1972.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--