Develop Reference

Bootstrap 5's Button Text is Black Instead of White Like their Demo

I am not sure if this is something I did wrong when installing Bootstrap 5, but a lot of my buttons are using a black font instead of the white font as is seen on the Bootstrap 5 Documentation
For example, the .btn-primary on the Bootstrap docs looks like this:
However when I use the identical HTML I get this as a result:
For reference the HTML in both their example and mine is:
<button type="button" class="btn btn-primary">Primary</button>
Not only is the text colour a different colour, but the background colour is different as well. In fact looking through my compiled .css file, a good chunk of the bootstrap colours used all across the code has this "washed out" appearance similar to the blue colour in the button. From the Chrome dev tools the style appears to be coming from Bootstrap files themselves, not from any style I am inadvertently applying. The SCSS is being compiled down to CSS files via the normal Laravel setup (webpack mix). I am just using the NPM packages for bootstrap 5.
window.bootstrap = require('bootstrap'); and NPM package "bootstrap": "^5.1.3",
My app.scss file doesn't have much at all in it:
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
#import "~bootstrap-icons/font/bootstrap-icons";
// "Lobster" Font for H1's
#import "https://fonts.googleapis.com/css2?family=Cuprum&family=Lobster&display=swap";
// Flatpickr Styles
#import "~flatpickr/dist/flatpickr.min.css";
// Font Awesome Free
#import "~#fortawesome/fontawesome-free/css/all.min.css";
// DataTables Styles
#import "~datatables.net-bs5/css/dataTables.bootstrap5.min.css";
#import "~datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css";
h1 {
font-family: 'Lobster', cursive;
}
a.torn-link {
color: $orange;
}
.ttt-title {
font-family: 'Lobster', cursive;
}
.card-title {
font-family: 'Cuprum', sans-serif;
}
html {
background-color: #fff;
color: #636b6f;
}
body {
background-color: #fff;
color: #636b6f;
}
.links {
>a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
}
#settings-button {
&:hover {
fill: rgba(189, 189, 189, 0.25);
}
}
.ui-dialog-title {
font-family: 'Cuprum', sans-serif;
}
thead, th {
text-align: center;
}
Edit: Even all the Bootstrap Colored links appear to be washed out. For example the .link-warning yellow is not possible to use as the colour is too washed out to be able to read it. Whereas the yellow on their page is completely readable. So it's not even that I am just accidentally applying a style to a button or something.
Edit2:
Here is what my button looks like in the dev tools (note the colours differ from what the Bootstrap 5 docs colours have
and the buttons CSS is just coming from the compiled app.css file generated via the webpack:
Edit 3: My _variables.scss file:
// Body
$body-bg: #f8fafc;
// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

In the _variables.scss file at some point in adding Bootstrap 5 to Laravel 8 it looks like one of the scripts added colours, or I messed up at some point and added a colour pallet into the variables file.
All of the colours in the variables file were similar to the Bootstrap default colours, but instead were a more washed out version. This is what was causing anything in Bootstrap which used these variables to appear washed out.
Simply removing all the colours I had defined in the _variables.scss file fixed the problem.

Thanks for your answer ComputerLocus, I was experiencing the same problem. Since I couldn't add a comment due to reputation I will write this answer.
The solution stated was correct. In more detail you need to accesss _variables.scss which can be found in resources/sass/. Once you delete the conflicting declared colours, you will need to run npm run dev in the terminal inside your main project directory. If changes still not showing, refresh your page using ctrl + F5.
That's all, folks :)

custom fonts are not displaying in the site

I have custom fonts which I would like to import via css using webpack.
css:
#font-face {
font-family: 'SBonusDisplay';
src: url('../../assets/fonts/SBonusDisplay-Regular.ttf')
}
h2 {
font-family: 'SBonusDisplay' !important;
font-style: normal;
font-size: 1.125rem;
}
This is part of my webpack config:
{
test: /\.(woff(2)?|ttf|eot|otf|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]-[hash:base58:3].[ext]',
outputPath: 'fonts/'
}
}
]
}
For some reason the right font is not showing up. its completely different font. any idea what I am doing wrong?
Just u are aware I am working on a PWA Studio Magento web app, the webpack config is quite long and thats why I just paster part of it that is relevant to the loading fonts.

Are you able to please give the URL of this site? and please create a proper fontkit with https://www.fontsquirrel.com/tools/webfont-generator
hope you will get the results you want

Using Polymer without Roboto

I have a Polymer 2 app with an explicit --paper-font-common-base specified before loading any of the components:
--paper-font-common-base: {
font-family: 'Comic Sans';
/* Not really, nobody's that evil, but problem is there for any font */
};
Then, at some point when loading Polymer components, for instance paper-dialog, will import typography.html
<link rel="import" href="../paper-styles/typography.html">
In turn typography.html imports Roboto and overrides the mixin:
<link rel="import" href="../font-roboto/roboto.html">
...
<custom-style>
<style is="custom-style">
html {
--paper-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
};
This overrides the font face I've specified, but also goes and downloads Roboto from Google's CDN, which I explicitly do not want it to.
Other Polymer components, for instance paper-radio-button take a different approach:
/*
This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
*/
How do I set --paper-font-common-base so that Polymer components use the same font as the rest of my application?

Looks to me like <custom-style> is loading directly into your <head> tags as it's wrapped in <script> tags.
To over ride this behaviour you'd need to add your script higher up in the <head> tags also.

One way to get around this is to make your own font-roboto dependency with an empty roboto.html file. Then in your bower.json you would force your dependency to be the resolution to the font-roboto conflict.

I'd suggest to
Fork <paper-dialog>, and remove the import of typography.html
Load your own copy of <paper-dialog>
File a ticket, or a pull request, for <paper-dialog>
If your change is officially accepted, load the official <paper-dialog>, again.

If you want this font to work on the entire web app, is your
--paper-font-common-base: {
font-family: 'Comic Sans';
};
declared into a custom-style element ?
If not try that :
<custom-style>
<style>
html {
--paper-font-common-base: {
font-family: 'Comic Sans';
};
}
</style>
</custom-style>
And if you add that into you root element, it should be applied in all the child elements except if some custom components override their own font.
Edit :
There is a plunker example.

In .bowerrc add this:
{
"scripts": {
"postinstall": "node -e \"require('fs').writeFileSync('bower_components/font-roboto/roboto.html', '')\""
}
}
It will make roboto.html as an empty file without any error requests after build.

How load my new fonts in html code

I want to load a font in my CSS and/or HTML code. I need two fonts(bigsmalls-bold and lft-etica-web) but I don't find how download the font. I only I find a javascript code in
https://typekit.com
This javascript code I have to add in head of my html code.
I did it, but don't change my fonts. Could someone help me please?
Thank you so much

Try using #font-face { url } in your css file. Uploading the font
Like this :
#font-face
{
font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot');
}
The .eot is for IE9

hai you have two options
1st one google font
2nd one CustomFonts
#font-face {
font-family: "MyCustomFonts";
src: local("MyCustomFonts"), url("../fonts/ArialNarrow.ttf") format("truetype");
}
try this

Typekit explains on there site how to install a font. Login, goto the kit editor and click [ embed code]
<script src="//use.typekit.net/YOUR_CODE_GOES_HERE.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
After you've done that:
If you want to use Typekit in your CSS, click the “Using fonts in
CSS” link in the selectors area of your kit to reveal the appropriate
font-family names to use. Once you’ve included the Typekit embed code
in the of your documents, you can add these font-family names
to the CSS rules in your own stylesheet:
h1 { font-family: "proxima-nova", sans-serif; }
http://help.typekit.com/customer/portal/articles/6859-working-with-css-selectors
Using the font-family Names in Your CSS

font-family Verdana-Bold not supported in Firefox

If I set the font-family to Verdana-Bold, it doesn't work in FF (version 18) but Chrome (version 24) is fine.
If I change the font-family to Verdana, it works in both browsers.
Similarly, CourierNewPS-BoldMT, doesn't work, but Courier does.
Does anyone know of a generic solution to solve this? like a JS or a CSS technique that could convert the fonts specific to the browser?
http://jsfiddle.net/skUxK/4/
Here's the description of the use case:
I have a HTML5 app, that also has a equivalent windows desktop version, a mac app and a iOS and android app.
All these apps can make changes to a text, and then store those in a XML file.This file can be then be loaded any app.

If you just want to use the bold version of a font, use the font-weight property.
font-family: verdana;
font-weight: bold;

Use #font-face so that every single browser can display the exact same font.
For more information: http://www.css3.info/preview/web-fonts-with-font-face/
#font-face {
font-family: MyFont;
src: url('mybeautifulfont.otf');
}
body{
font-family: 'MyFont', 'Verdana-Bold', 'Verdana';
}
If you only just want bold text, then:
body{
font-family: 'Verdana-Bold', 'Verdana';
font-weight: bold;
}

As far as I can tell, bolded Verdana displays fine on Firefox.