I would like to override the global Antd font. I've found a few examples but the Antd styling is always taking precedence.
In the top level component (App.tsx) I'm importing an scss file. This file is being loaded correctly as I can see the style being overridden when inspecting the page.
app.scss
#font-face {
font-family: 'Mulish', serif !important;
}
&:root{
font-family: "Mulish", serif !important;
}
html body{
font-family: "Mulish", serif !important;
}
body{
font-family: "Mulish", serif !important;
}
The font-family is instead set to the Antd default. If I turn disable this css when inspecting it falls back to the Mulish font.
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
How can the global font be overridden with Antd 4.23.0?
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.
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 am using a pretty standard print stylesheet for my webpage, and it works perfect in all browsers except for Google Chrome. Whenever I print the page in Chrome it both previews it and prints it using my tablet stylesheet. When printed from another browser it prints using the standard stylesheet.
All of my other webpages print fine in chrome, but this one webpage is giving me trouble. Any ideas as to what the problem could be?
The following is my print.css file.
body {line-height:1.5;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt;/*margin: 25mm 25mm 25mm 25mm;*/}
#page-wrapper.container {background:none;
min-width:960px;
max-width:960px;
width:100%}
hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;}
hr.space {background:#fff;color:#fff;visibility:hidden;}
h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;}
code {font:.9em "Courier New", Monaco, Courier, monospace;}
a img {border:none;}
p img.top {margin-top:0;}
blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;}
.small {font-size:.9em;}
.large {font-size:1.1em;}
.quiet {color:#999;}
.hide {display:none;}
a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;}
Can you please include the code snippet of where the CSS gets included into the page? if media="print" is set on the link tag for our tablet stylesheet, then that's what the printer will use. Without some code, it's hard to diagnose.
I have the following CSS declaration:
body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
It isn't loading on the page. I'm having to add:
<style>
body {font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;}
</style>
To the HTML to get it to work...This is true in chrome and safari...this one is weird, thoughts?
Note that all other CSS is working correctly...
So, !important worked, I'm not sure why. One note, I took out the extra families, it looks like this now:
body, body * {
font-family: Verdana, Tahoma, sans-serif !important;
}
But changing that had nothing to do with fixing it. The !important fixed it. Even though there isn't anything else changing the font-family at any other point in the CSS (refer to the working JS Fiddle). I attached a screenshot of the developer tools to show the inheritance.
have you tried to select following?
body, body * {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element in the body and the body itself */
/* OR just */
* {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
} /* this affects every element */
here is what you can do with CSS3:
http://www.css3.info/preview/web-fonts-with-font-face/
some font-families have to be enabled using `font-face, usually u do something like this
#font-face {
font-family: 'alex_brushregular';
src: url('alexbrush-regular-otf-webfont.eot');
src: url('alexbrush-regular-otf-webfont.eot?#iefix') format('embedded-opentype'),
url('alexbrush-regular-otf-webfont.woff') format('woff'),
url('alexbrush-regular-otf-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'alex_brushregular', Arial, "sans-serif";
}
This is an old post, but in case people have the same kind of problems and ended up here, I would suggest you make sure no errors in your css file (the easiest way to check is to comment out all settings except the font family or replace the css file with one that has just the font family setting). I just had the same problem and found the cause, after hours of frustration and no solutions from googling (that's why I came to this post; adding important! didn't work for me), was an error in my css file, so the browser skipped some settings including the font family. Although there're no errors in the css text shown in the original post, there might be one in the real css file.
Just try with the following example :
#font-face{font-family:'Arvo';src:url('fonts/Arvo-Regular.ttf')}
#font-face{font-family:'Erasmd';src:url('fonts/ERASMD.TTF')}
body { font-family: Arvo; }
(or)
body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important; }
I think this may help you to resolve your problem.
Something like this can also happen if your browser is using a cached version of your CSS file.
A "hard refresh" using CTRL+F5 might help in that case, as suggested e.g. here and here, and e.g. in the Firefox docs.
In my experience I had issues because there was only text within buttons on the page I was testing.
Setting the button font-family to inherit fixed the issue. I'm guessing this might extend to other elements also.
body {
font-family: <your family>;
}
button {
font-family:inherit;
}
It May be due the font you are using is not installed in your browser(even some 'websafe' fonts).Try using generic-font(like sans-serif,cursive,monospace) to see if the you style decalartion is working..