I am using "Populaire" font. I am having a weird problem.
When I view the font in laptop, fonts are clearly formed without any distortion (on all browsers) but when the same was seen on other systems(not all but few systems do), it started appearing distorted (again, on all browsers). I am not sure what will cause the font to be distorted in some systems. Please advice. Here is the CSS that I have used in my code..
#font-face {
font-family: 'Populaire';
src: url('font/populaire.eot');
src: url('font/populaire.eot?#iefix') format('embedded-opentype'),
url('font/populaire.woff') format('woff'),
url('font/populaire.ttf') format('truetype'),
url('font/![enter image description here][2]populaire.svg#populaire') format('svg');
}
h1 {
font-family: 'Populaire','Helvetica neue',Helvetica,Arial,sans-serif;
font-size: 2em;
font-weight:lighter;
color: #ffffff;
background-color: #8D407C;
width:250px;
margin: 0;
padding: 0;
}
The type in your second screenshot is being displayed without anti-aliasing. This might occur because the second computer does not have Cleartype enabled.
http://www.microsoft.com/typography/cleartype/tuner/step1.aspx
In Windows Vista, Windows 7, and OSX Cleartype (or an equivalent anti-aliasing engine) is enabled by default.
Without anti-aliasing, any typeface that has not been specifically hinted for on-screen display will appear 'jaggy', since its curves do not neatly fit to the screen's pixel grid.
Related
I'm using a custom font which I imported like this:
#font-face {
font-family: 'Circular Std';
src: url('CircularStd-Bold.woff2') format('woff2'),
url('CircularStd-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
I'm developing on MacOS - and with every browser on this OS the font is displayed perfectly.
Somehow on Windows, even with the newest version of Chrome and every other browser, the font is not vertically centered, but rather aligned to the top.
How so?
With:
font-display: swap;
It gives the font face an extremely small block period and an infinite swap period.
To answer your question, try using:
font-display: auto;
REASON:
The reason why you want to use auto instead of swap is because
It's very good practice
The font display strategy is defined by the user agent, when using auto
So whether you're on Windows or Mac it will automatically change to your preference
Hope that cleared things up for you!
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.
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');
}
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.