I was just about to change the default font with Bootstrap SASS and I found this:
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
What's the difference between sans-serif and serif in this context? Because if I inspect my page, all fonts are Helvetica Neue.
How is serif/Georgia utilised if all I'm seeing is Helvetica Neue being used?
Those are just options to change the base style for the font so if you want serif or sans-serif. They do this:
Create the three base styles:
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
Then set the sans-serif on a base var:
$font-family-base: $font-family-sans-serif !default;
And use that base to define the font-family for the body therefore all the document:
body {
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
color: $text-color;
background-color: $body-bg;
}
The other options are there if you want to customize the theme and change quickly to serif or monospace all the document.
Related
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?
If I use this in my CSS file:
body {
font-family: "Open Sans", Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
then Firefox (69.0.3 on OpenSUSE Tumbleweed, KDE 5.17.2) finds the "Open Sans" font on my system and renders the body text using this font as expected, and this is confirmed in the Web Inspector tool (which underlines the active font):
But if the order of font-family is adjusted to reduce the priority of "Open Sans" so that we end up with this:
body {
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Open Sans", "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
suddenly Firefox no longer seems to be able to find "Open Sans" and instead uses whatever its default sans-serif font is, as confirmed in the Web Inspector tool:
Is there some obscure CSS3 rule which explains why Firefox ignores all fonts within font-family even when one of those fonts is available and will work fine if that font comes first in the list? Or is this a known bug in Firefox?
Update
As requested by j08691 I retested with a smaller number of fonts in the font-family list, and the length of the list makes no difference.
But I did find something weirder: no matter how long the list nor how soon "Open Sans" appears in the list, it works fine until you position "Open Sans" after Calibri or Arial. If Calibri or Arial come first then "Open Sans" is never found (even though neither Calibri nor Arial exist on my system) and Firefox defaults to the generic sans-serif family.
This surely is not correct CSS3 behaviour?
I'm trying to run the lms of edx-plateform but i keep getting this error
CompileError: Error: Undefined variable: "$verdana".
on line 314 of lms/static/sass/partials/base/_variables.scss
$sans-serif: $verdana !default;
-----------------^
that's what is written inside the _variablesscss file
$sans-serif: 'Open Sans', $verdana, sans-serif !default;
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console',
monospace !default;
$body-font-family: $sans-serif !default;
$serif: $georgia !default;
I'm not sure what to do to solve this problem
Looks like you need to add a definition for the $verdana variable in your _variablesscss file:
$verdana: Verdana, Geneva, sans-serif !default;
Or simply remove the $verdana variable from your $sans-serif variable.
$sans-serif: 'Open Sans', Verdana, Geneva, sans-serif !default;
I have an HTML which uses the Helvetica Neue font for most of the text.
font-family: 'Helvetica Neue', Helvetica, Arial, Calibri, sans-serif;
<font color="#ffffff" face="'Helvetica Neue Medium','Helvetica Neue', Helvetica, Arial, sans-serif">Sample text</font>
Using Fount I can see that the text is actually written using Helvetica Neue Medium.
My question is where does the css/html look for this font ? I checked my /Windows/Fonts folder and there is no Helvetica font there.
The CSS will look for fonts installed in your font directory.
We can configure fonts with #font-face rule
#font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Medium"),
local("HelveticaNeue-Medium"),
url(HelveticaNeueMedium.ttf);
font-weight: bold;
}
ref https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
I have my fonts set in my style.css:
font-family: "Arial, Verdana, sans-serif";
But my website still seems to use sans serif. What is the problem here?
The commas in your CSS font-family specification need to be outside the quotes.
For example:
font-family: "Arial", "Verdana", sans-serif; /* And you should really
omit the quotes if it's only one word */
Not
font-family: "Arial, Verdana, sans-serif";
Otherwise, the CSS parser thinks you're looking for a font called "Arial, Verdana, sans-serif", which clearly doesn't exist.
Try removing your "" from the font-family definition:
font-family: tahoma, sans-serif;
Like that. Only put the " around when you have multiple words such as
font-family: "mutiple word font name",tahoma, sans-serif;