When I am using -webkit-text-outline property there are weird artifacts that shows up on the outline. How can I fix it. I have seen that on genius.com there are no artifacts, and they are also using -webkit-text-outline (example https://genius.com/a/ken-carson-feels-betrayed-on-new-song-the-end), so this is not a problem with a webbrowser, but something in my code must work wrong.
Website: https://dnidomaturypl.netlify.app
Source Code: https://github.com/mbledkowski/dnidomatury
-it's totaly related to font design, we cannot change it different font brhaves differently whith -webkit-text-outline property.
It's because how the font were build.
.Poppins {
font-family: 'Poppins', sans-serif;
}
.Poppins {
font-family: 'Jost', sans-serif;
}
.roboto {
font-family: 'Roboto', sans-serif;
}
h1 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
}
<h1 class="Poppins">Poppins</h1>
<h1 class="Poppins">Jost</h1>
<h1 class="roboto">Roboto</h1>
Related
I have a login form with username and password inputs. In Chrome on Windows (doesn't happen in other browsers or on a Mac), when hovering over a saved username from the Chrome password manager, the font changes. The font change then changes the width of the input, throwing my alignment out of whack.
Obviously I can set a fixed width to my input to save my alignment but that doesn't really solve the problem, just puts a band-aid on it. What I really want is to prevent the font change in the first place.
I've tried targeting the input with :-webkit-autofill and putting !important all over my input's css just to see if anything would stick but no dice.
Codepen here. You'll need to be in Chrome on Windows and use Google's password manager.
HTML:
<form>
<label>
<input type="text" name="username" placeholder="Username" required />
</label>
<label>
<input type="password" name="password" placeholder="Password" required />
</label>
<button type="submit">Login</button>
</form>
SCSS:
// setting font for more exaggerated difference
* {
font-family: Times, "Times New Roman", serif;
}
// why doesn't this or anything else work?
input {
&:-webkit-auto-fill {
&,
&:hover,
&:focus {
font-family: Times, "Times New Roman", serif !important;
}
}
}
Any clues on preventing this font change would be appreciated!
try this!
&:-webkit-autofill::first-line,
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
font-family: Times, "Times New Roman", serif !important;
}
you might only need this though
&:-webkit-autofill::first-line
the others are just incase
This seems to be a recent change in Chrome: Issue 953689: Previously entered form values overrides styling when moused over. As far as I’ve seen this happens both on macOS and Windows, anywhere autofill is presented to the end user. Apparently this has intentionally been done to fix a security issue with the previous implementation – Issue 916838: Security: Two autocomplete flaws together allow sites to invisibly read credit card numbers after a single keypress
There doesn’t seem to be a way to override those new styles at the moment – if the change in styles is really too obnoxious, you can either disable autofill (Disabling Chrome Autofill) or set your field’s font styles (font-family, font-weight, font-style, font-size to match that of Chrome’s autofill suggestions – as suggested here: https://stackoverflow.com/a/56997845/1798491)
Here is working solution that worked for me in 2021 to prevent Chrome from changing font on password/username input fields:
input#username {
font-family: "Rubik";
font-weight: bold;
color: blue;
}
input:-webkit-autofill::first-line {
color: red;
font-family: "Rubik";
font-weight: bold;
}
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<input id="username" name="username"></input>
Also I noticed that for some reason display: flex conflicts with that code, take a look:
input#username {
font-family: "Rubik";
color: blue;
font-weight: bold;
display: flex;
}
input:-webkit-autofill::first-line {
color: red;
font-family: "Rubik";
font-weight: bold;
}
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<input id="username"></input>
How to change Chrome autocomplete styles on input:
input {
...
font-family: $body-font;
font-size: 1rem;
font-weight: bold;
color: #000;
background-color: #fff;
// Background color
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
}
// Font styles
&:-webkit-autofill::first-line {
font-family: $body-font;
font-size: 1rem;
font-weight: bold;
// color: green;
}
}
I don't run on windows but have you tried targeting the label and form as well? Re: css specificity. Then try web-kit auto-fills on all
This is the only way I've found to get around the problem of syncing the font-size when autofill is being used. This zooms the autofill and then resizes the autofill::first-line font-size, which seems to give you independent control of both. Line-height needs to be adjusted accordingly. Password input needs a different line-height around 1.25 with these settings (still jumps a little).
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
zoom: 1.1666;
}
input:-webkit-autofill::first-line {
font-size: 0.8333rem;
line-height: 1.5;
}
As of now it seems that there's no way to change this in Chrome. I'd definitely call it a bug.
However, a decent workaround is to set the font-family for all autofill-able inputs or inputs within forms that have autofill abilities to this:
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
This is a great cross-browser, cross-platform solution because it just takes whatever your system font is, which is exactly what Chrome seems to be doing for it's autofill font.
It also ensures that your forms are going to have readable fonts on whatever OS your user is using.
I'm trying to use this font, Open Sans Extra-Bold:
https://fonts.google.com/specimen/Open+Sans
For some reason I can't get it to show.
Any help?
JSFiddle: https://jsfiddle.net/0hhbgyrd/
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
div {
font-size: 90px;
font-family: Open Sans;
text-transform: uppercase;
}
.normal {
font-weight: 400;
}
.bold {
font-weight: 700;
}
.extra-bold {
font-weight: 800;
}
<div class="normal">
Blog
</div>
<div class="bold">
Blog
</div>
<div class="extra-bold">
Blog
</div>
EDIT: Seems this works correctly in Firefox, but not in Chrome?
Chrome:
Firefox:
Fix the incorrect #import code provided by Google Fonts.
The import code they provide is causing problems for me as well, and it did not have the ' -marks before they updated the whole Google Fonts -page, so they kind of broke the code in the progress of their update.
I sent out a hotfix request few months back when they did not have the code wrapped inside (), which of course didn't work either. They fixed it but left the ' -marks in, so it works for some but certainly not for all.
So remove those ' -marks and it should work just fine:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,800);
instead of
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
I also recommend using the correct font-family markup:
font-family: 'Open Sans', sans-serif;
I'm using a popular posts widget on blogger and I can't get the font to change. Im using a custom font I have everywhere else on my blog. I used this css as a temporary solution
.sidebar h2.title, .sidebar h2 {
display: none;
}
this gets rid of the title, but now I'd like the title back and using:
.sidebar h2.title, .sidebar h2 {
font-family: raleway;
}
doesn't work. I've also tried with the widget Id and some other variations..
.popularposts1 {
font-family: raleway
}
Some help would be greatly appreciated :)
Edit *
I've also tried
.popularposts .widget-title {
font-family: 'Raleway', sans-serif;
}
I'm sure it's something along these lines but i just can't figure out where I'm going wrong
You need to import the font (if you haven't) and also use quotes around the font-family declaration.
#import url(https://fonts.googleapis.com/css?family=Raleway);
.your-class {
font-family: 'Raleway', sans-serif;
}
<div class="your-class">
This is in a different font.
</div>
I am trying to tint an image with a transparent linear gradient.
Dev tools say my property is invalid. If I get rid of the gradient, the image shows up fine. Is there something I'm missing?
body {
background: linear-gradient (rgba(255,0,0,0.45),rgba(255,0,0,0.45)),
url('Fabric-4.png');
font-family: 'Oswald', sans-serif;
font-size: large;
}
You need to use prefix's for different browsers while using css gradient propery,
check this code.
body {
background: -webkit-linear-gradient(rgba(255,0,0,0.45), rgba(255,0,0,0.45));
font-family: 'Oswald', sans-serif;
font-size: large;
}
This is simply because your markup fails. You have a single space too much. Remove the space between linear-gradient and ( and you will see the issue sorted. I added the working code below, and marked it up to my own preference.
Here's a pen with the working example (and a different image). Try adding the space live in the pen, and see everything disappear again. :)
body {
background:
linear-gradient(
rgba(255,0,0,0.45),
rgba(255,0,0,0.45)),
url('Fabric-4.png');
font-family: 'Oswald', sans-serif;
font-size: large;
}
I am trying to incorporate CSS before content.
I want to put info icon (i), which is "\e608"
#securityCodeLink:before {
content: "\e608";
}
The output looks like this
But if i try with 2701 or something like that
#securityCodeLink:before {
content: "\2701";
}
It works perfectly fine.
Can any one tell me why is this and how can i fix this?
The icon will only appear if you're using a font which supports it.
On StackOverflow (which uses a font-family of Arial, 'Liberation Sans', 'DejaVu Sans'):
\e608 renders as
\2701 renders as ઍ
I researched a lot about this and finally it get Solved..
The icon will only appear if you're using Specific Font which supports it.
In CSS we need to define the font as below.
#font-face{
font-famiy:'nameOfFont';
src: url(data:application/font-woff;charset=utf-8;base64______format("woff");
}
.requiredFont input[type=radio]{
font-family: nameOfFont;
display: inline-block;
text-decoration: inherit;
}
.requiredFont input[type=radio]{
content: "\E608";
}
.requiredFont input[type=radio]:checked {
content: "\E609";
color: reqired HEX Color;
}
Most Probably It will work...when we design the font for the content in radio button we want..