The option to toggle between sans-serif and serif using the font-setting button doesn't work when I change the fonts in style.CSS. Any suggestions?
This seems to happen when I change fonts for the main text, such as:
_output.yml
bookdown::gitbook:
css: style.css
style.CSS
p {
font-family: Arial;
}
But not all text changes. For example, if you change just the font for lists, the button still works fine.
style.CSS
li {
font-family: Arial;
}
The button itself seems to work fine, toggling between the class
.font-family-1 = sans-serif and .font-family-0 = serif
Currently, I think what you are observing is the expected behavior of the fontsetting gitbook plugin.
The button itself seems to work fine, toggling between the class .font-family-1 = sans-serif and .font-family-0 = serif
When you click on the button, the html root node of the book change class between .font-family-1 and .font-family-0
If you want to change the default font-family used for the book, you can customize css to override the default which is
.book.font-family-0 {
font-family: Georgia, serif;
}
.book.font-family-1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
The button will change the class to the root not of class .book and apply the correct css to the all book.
Related
I've added a custom font to my project using font-face along with font-family in this way:
#font-face {
font-family: "Caprice";
src: url("../fonts/Caprice.ttf") format("truetype");
}
html,
body {
margin: 0;
padding: 0;
font-family: "Caprice", Arial, Helvetica, sans-serif;
}
But the result is that the font, instead of being rendered as it should, it's being rendered in a very very "creepy way". Here's an image to let you better understand:
I've tried changing font but the result is neatly the same. I've also tried the page in different browsers without any success.
What am I doing wrong?
All the fonts I've tried are totally different from what I'm seeing displayed.
I'm building a simple landing page here. I'm calling a custom font (Harbour) via #fontface but on Chrome, the title first defaults to a basic font. It takes a refresh for the custom font to appear. Anyone know what's happening here?
You are not declaring the font in any of your elements.
in your base.css; you are declaring those fonts at body:
font-family: 'Trash', Futura, 'IBM Plex Sans', Arial, sans-serif;
you should put:
font-family: 'Harbour';
in the element you want it to open
like:
h1 {
font-size: 2em;
margin: 0.67em 0;
font-family: 'Harbour';
}
I'm trying to do a seemingly easy thing but without much luck. I have a React app that uses the Grommet UX framework. In the app, I use a Web Chat component which I would like to style.
The grommet style is correctly being applied for fonts but my custom changes for my web chat component are not being applied.
Any help would be very much appreciated.
App.js
import '../scss/custom.scss';
...
class PatientApp extends React.Component {
...
render() {
...
<Chat className='wc-app' directline='GUID_Entered_Here />
Custom.scss
#import 'elu.defaults.scss';
#import '~grommet/scss/grommet-core/index.scss';
body .wc-app, .wc-app button, .wc-app input, .wc-app textarea {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
background-color: #2AD2C9;
}
.wc-chatview-panel {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
font-style: #2AD2C9;
}
.wc-header {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
font-style: #2AD2C9;
}
.wc-message-pane {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
font-style: #2AD2C9;
}
Below is a screenshot which shows the output HTML when i run my code. On the right you will notice the classNames being referenced.
As the DOCS says:
In the /src/scss/ folder you will find the source files for generating
/botchat.css. Run npm run build-css to compile once you've made your
changes. For basic branding, change colors.scss to match your color
scheme. For advanced styling, change botchat.scss.
All,
I was able to get this working just had to set a height and width within the chatview panel and everything is now appearing correctly.
So I'm looking at this Google font called Roboto
https://fonts.google.com/specimen/Roboto?selection.family=Roboto
It comes in different styles such as light, regular, medium, etc.
The site says to import you can do
#import url('https://fonts.googleapis.com/css?family=Roboto');
and then in your style sheet you can do:
font-family: 'Roboto', sans-serif;
Well, thats fine, but I need a mixture of them. Such as light, and regular, not just one.
So I can do
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
and this selects them all.
But it still says in the style sheet you can do:
font-family: 'Roboto', sans-serif
If you do that, then it just sticks to the first one. I need one style to be 300, one to 400, one to be 500. So how do I specify which one in the css?
I've tried doing
font-family: 'Roboto:300', sans-serif
and
font-family: 'Roboto 300', sans-serif
and
font-family: 'Roboto-300', sans-serif
but none of them worked. Can anyone help?
Use the font-weight property
http://www.w3schools.com/cssref/pr_font_weight.asp
Example:
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
What i recommend is have a class that defines the font to be used
i.e after importing the google font, in your css add:
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,600');
.robotoriser{
font-family: 'Roboto', sans-serif;
font-weight: Normal; /* This is just so when ever you call use this class, it uses the normal font weight by default */
}
.rbt-300{ /* you can also name this rbt-light or whatever you like*/
font-weight:300;
}
.rbt-400{
font-weight:400;
}
.rbt-600{
font-weight:600;
}
... and so on.
Then use in html like this
<p class="robotoriser rbt-300" >This is light text</p>
<p class="robotoriser rbt-400" >This is medium text</p>
<p class="robotoriser rbt-600" >This is heavy text</p>
Here is a fiddle to a working demo
Note you can also use it in any class you have
e.g
.some_element{
font-family: 'Roboto', sans-serif;
font-weight: 300; /* Or any of the font weight values you included via the Google font url */
}
<p class="some_element"> Dragons are goats that can fly :D </p>
I am using a Grails rendering plugin to generate PDF.
I want to include CSS with my PDF to render it nicely. I found an example on the rendering plugin website
I put the CSS below in print media so that it works for PDF, but this does not work for me. I also do not know how to change the font from Arial to another font. Can someone explain this to me?
The plugin uses Arial font with this CSS:
#font-face {
src: url(path/to/arial.ttf);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: cp1250;
}
body {
font-family: "Arial Unicode MS", Arial, sans-serif;
}
You need arialuni.ttf not just arial.ttf download it here: http://www.findthatfonts.com/search-2683324-hTTF/fonts-download-search-engine-ARIALUNI.ttf.htm
Then
You have to give your #font-face a font-family name like this:
#font-face {
font-family: "Font-Name";
src: url(path/to/font.ttf); // you have to add your font.ttf file to the server in a folder like assets/css/fonts or something.
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: cp1250;
}
body {
font-family: "Font-Name", Arial, sans-serif; // you called your font Font-Name in the #font-face so now you can use it as Font-Name everywhere else in you css.
}
Otherwise your arialuni.ttf has no name so you can't use it in other divs in your css.
The next is working for me good:
#font-face {
font-family: 'Calibri';
src: url(${grailsApplication.config.grails.serverURL}/fonts/calibri.ttf);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
The -fs-pdf-font-encoding should be set in Identity-H.
And after it you can add something like
body {
font-family: 'Calibri';
}
It doesn't really matter what name you give the font, as long as you choose a name for the src you provide between te #font-face brackets, like font-family: "SomeName";.
Now, you can use the font everywhere using font-family: "SomeName".