I have some CSS for a text input in a table.
input.login-form__username {
-webkit-appearance: none;
font-family: "Poppins-Regular";
width: 20vw;
}
For some reason the font-family does not work correctly in Safari on macOS. It still displays the input box in Apple's OS font. This does work correctly in Chrome and other browsers, but not Safari.
Am I missing something that would make it work?
You should see this link, some fonts doesn't work on safari like you said, to solve it you could add another equal font that works on safari, doing something like this:
code {
font-family: "Times New Roman", Georgia, serif;
}
If multiple family names are used, the browser will select the first one it finds either embedded on the page using #font-face or installed on the user's operating system.
Safari should be able to take TTF Files no matter what version.
#font-face {
font-family: 'MyFontFamily';
src: url("fonts/Poppins-Regular.woff") format('woff'),
url("fonts/Poppins-Regular.ttf") format('truetype');
}
Related
I have a webpage where I'm using the "font-family: Poppins-Medium;"
In my PC the font is displayed correctly.
However, in other PCs, only "Times New Roman" font is displayed.
May someone give me a help?
See CSS code:
.txt2 {
font-family: Poppins-Regular;
font-size: 14px;
color: #999999;
line-height: 1.5;
}
Thanks.
PS: This is the link to the page:
http://ez2main.somee.com/estock/cliadd.asp
In order to use custom font you should first declare #font-face.
It's all written on that link, but let me sum it a little:
step 1: upload font files to the server
step 2: declare font name and use the src property to link those files.
step 3: Now custom font will show on every browser since they available on the server.
Hope that helps!
When this happens to me it is because I have the font installed on my computer but no on the server. Make sure to set up your custom font with #font-face before using it.
#font-face {
font-family: 'Poppins-Regular';
src: url('../font/Poppins-Regular.eot'); /* IE9 Compat Modes */
src: url('../font/Poppins-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/Poppins-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../font/Poppins-Regular.woff') format('woff'), /* Modern Browsers */
url('../font/Poppins-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}
Also make sure to add appropriate fall back fonts to make it fail more gracfully.
font-family: Poppins-Regular, 'second-closest-font', Arial, etc;
I recommend using websafe fonts instead.
https://www.w3schools.com/cssref/css_websafe_fonts.asp
The browser that does not have those fonts installed, tries to load them from the URL http://ez2main.somee.com/fonts/poppins/Poppins-Regular.ttf and that is not a valid URL.
If you provide want to provide those fonts, you should make them available from your server. Otherwise, use standard fonts that every browser would have.
Using the normal CSS font-face does not appear to work properly on the new Windows 10 Edge browser. Works fine on IE11 and all other browsers. Has anyone else seen this? Seems like a bug in the browser.
Here’s the CSS we’ve been using.
#font-face {
font-family: "Univers";
src: url("../fonts/univers-webfont.eot");
src: local(Univers), url("../fonts/univers-webfont.eot"), url("../fonts/univers-webfont.svg"), url("../fonts/univers-webfont.ttf"), url("../fonts/univers-webfont.woff");
font-weight: normal;
font-style: normal;
}
.button_black {
font-family: "Univers";
font-size: 18px;
color: #slb-off-black-1;
}
Short Answer
Put quotes around the font name when using the local("Font Name") syntax.
Explanation
"Univers" renders fine in both Edge and Firefox. Your "Please log in..." element, though, is targeting "Univers Condensed", which renders in Edge only if you use local("Univers Condensed") with quotes. That is probably because Edge is more strict that Firefox is. MDN says...
src URL for the remote font file location, or the name of a font on the user's computer in the form local("Font Name"). You can specify a font on the user's local computer by name using the local() syntax. If that font isn't found, other sources will be tried until one is found.
Some Snips
Here are some screen shots that show the problematic CSS and HTML on your site.
Univers Condensed
No Quotes on local()
Tricky problem here. For some reason, the default font in Chrome has changed itself to Arial Black (or Arial Narrow - can't really tell) and won't change back. I've tried altering the Chrome font settings, and resetting Windows fonts to default, to no avail. It only seems to be affecting Chrome, not firefox.
Here's what my typical webpage looks like right now:
http://i.imgur.com/AgS0kQ4.png
Ideally, I'd hope to fix this w/o going through the hassle of a full reinstall (I have a lot of bookmarks).
Go To :
C:\Users\\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
And add following 2 lines in Custom.css
#font-face { font-family: 'helvetica neue'; src: local('Arial'); }
#font-face { font-family: 'helvetica neue'; font-weight:bold; src: local('Arial'); }
This worked for me.
I'm using an icon font throughout a site I have been building, and just noticed that the font does not display in IE10 on Windows 8 only. The font works fine in IE10 on Windows 7, and in Chrome/FF across the board.
Worth noting that SOME fonts from this set DO work in IE10/Windows 8. E.g. '\2699' works, but '\E744' does NOT work in IE10/Windows 8.
UPDATE: Here is a JSFiddle that exhibits the issue: http://jsfiddle.net/wqs5C/
Can anyone help me understand why it may not be working?
Here is the font declaration:
#font-face {
font-family: 'icons';
src: url("../Fonts/icons.eot");
src: url("../Fonts/icons.eot?#iefix") format('embedded-opentype'),
url("../Fonts/icons.woff") format('woff'),
url("../Fonts/icons.ttf") format('truetype'),
url("../Fonts/icons.svg#icons") format('svg');
font-weight: normal;
font-style: normal;
}
Here is the style (in IE10 developer tools, these have a line through them):
.exp_closed > .widget-head > .toggle:after {
content: '\E744';
font-family: 'icons';
font-size: 16px;
}
So I've ultimately traced this back to "Protected Mode" in IE10. It was preventing ALL icon fonts from working. As soon as I disabled it, everything started acting like I'd expect it to. The failures in FF on the JSFiddle are likely from cross-domain restrictions on font downloads.
Chrome 26.0.1410.64m on Windows 8 has problems rendering WebFonts. It is a known problem and a solution is to first serve the svg version of the font instead of the woff version. It fixes the anti-aliasing and makes font look pretty again.
The downside of this method is the weird rendering inside the element inside select inputs.
I added a jsfiddle to see it in action : http://jsfiddle.net/4mSpv/6/.
The CSS is as simple as it can be.
#font-face {
font-family: 'Montserrat';
src: url('https://raw.github.com/louh/website/master/fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
font-weight: 400;
font-style: normal;
}
select {
font-family: 'Montserrat', sans-serif;
}
I remove the local installation of a font and noticed an other windows 7 computer doing the same. Anyone knows what is going on with chrome? (IE, Firefox, Safari all render fine)
PS: Other browser fonts not included in JSFiddle to filter out the problem and each browser have their own quirks (not allowing font-size etc) but render the text fine
There is no way to solve this problem.
This is NOT a Regression issue and is existing from M24.
I submitted a bug report and it Weird character rendering in option menu
As automaticoo stated, it is a known issue with Chrome. However, you can workaround the issue with a technique mentioned in the selected answer for this post: Google Webfonts Render Choppy in Chrome on Windows.
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {
font-family: Arial; /* standard font */
}
}
That way you can use whatever font you want for browsers that still work, and replace it with a generic HTML font for Chrome.
So, I was actually looking for an answer for this, and I stumbled upon this question. I noticed this bug still exists today ( I just met it, such a happy meeting... ). Now I only found 1 solution, which is placing the svg font last in the #font-face declaration (this also means including all other formats). The only problem is that, when you for exampling try fixing the font rendering (to make it all smooth and stuff) you'd actually put the svg first.
Here are some examples to demonstrate it
1: SVG font last, no crisp font, options are displayed right
#font-face {
font-family: 'OpenSansLight';
src: url('../font/OpenSans-Light-webfont.eot');
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/OpenSans-Light-webfont.woff') format('woff'),
url('../font/OpenSans-Light-webfont.ttf') format('truetype'),
url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal; }
So as you can see, the options in the select box show just fine, but the font really isn't that crips, just look at "Register" (you might notice this better in comparison with my second example)
2: SVG font last, crisp font, stupid options in select
#font-face {
font-family: 'OpenSansLight';
src: url('../font/OpenSans-Light-webfont.eot');
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg'),
url('../font/OpenSans-Light-webfont.woff') format('woff'),
url('../font/OpenSans-Light-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal; }
Now you will see that the font is a lot more crisp but the select is really stupid.
I suggest adding another font-face with the svg last just for select's. This will keep your fonts crisp throughout the website but display the options just fine.