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.
Related
I've recently changed the font in my store hosted on BigCartel with the #font-face feature. Unfortunately there are some characters that still remain with the font from BigCartel. I've added in my CSS these lines:
#font-face {
font-family: GothamBlack;
src: url(https://github.com/JDRF/design-
system/blob/master/dist/fonts/gotham/black/gotham-black-webfont.woff2);
}
body {
font-family: GothamBlack, sans-serif;
}
A friend told me to change the part in the layout tab, but that didn't helped me to fix the issue. Any clue on how can I do it?
Thank you
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 have problem with new fonts in my web site.
I do copy new fonts in folder and make a CSS.
#font-face {
font-family: 'PT Sans Bold Narrow';
font-style: normal;
src: local('PTSANSBOLDNARROW'), url(font/PTSANSBOLDNARROW.woff) format('woff');}
This code works only when it is inserted directly in the header of the web page.
When I add this code in CSS file, all things in CSS works except font-face.
Can anyone guide me what could be the mistake.
I solved. Wrong path url...
url(../font/ptsansbold.woff)
Thanks.
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.
I have tried numerous things, including clicking on ALL of the questions related to my question (there were tons!) and tried all of their "solutions" but none worked for me. I tried wrapping the .eot file in a conditional IE statement but that didn't work either. Somebody said that #font-face won't work in Firefox if your not hosting the file on your own server... Or something like that. Anyway, go here to see the comparison between all other browsers vs Firefox. Please don't bash! I really did try every solution Google and stackoverflow had to offer. (Keep in mind that this is a Tumblr theme, and all files/images must be hosted via Tumblr's uploader .)
Thanks in advance!
Also, here is the code I have been using:
<!--[if IE]>
<style>
#font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
}
</style>
<![endif]-->
<style>
#font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
src: local('S'),
local('S'),
url('http://static.tumblr.com/ctwb3zj/n4Zlfluv6/zegoelight-u-webfont.ttf')
format('truetype'),
url('http://static.tumblr.com/ctwb3zj/ovQlfluz3/zegoelight-u-webfont.svg#font')
format('svg');
url('http://static.tumblr.com/ctwb3zj/1AJlfluwz/zegoelight-u-webfont.woff')
format('woff');
}
</style>
I tried going to about:config in Firefox and toggling security.fileuri.strict_origin_policy to false but it didn't work. Plus I need a way so all users who view my theme or use it to be able to view the font as well, and that is set to true by default.
Edit:
Here is the solution:
Cross domain workaround
Firefox does not like cross domain embedding.
Earl, I hate to be one to tell you this but your problem isn't with your #font-face rule. At least it wasn't when I checked out your site. When you use CSS font-family you need to make sure there is a comma between each different font in your chosen stack.
Your h6 selector was:
h6 {font-size:36px; font-family: 'S' sans-serif;}
It should be:
h6 {font-size:36px; font-family: 'S', sans-serif;}
Give this a try and I think it will work out for your. Just make sure all of your font-family stacks have commas in between multiple fonts. Firefox is a bit more strict with parsing technically incorrect CSS; Firefox just ignores it. That appears to be why you are having a problem, not your #font-face.
I'm not completely convinced by your #font-face rule. Can you copy the following and see what (if any) difference it makes? Just to clean things up.
#font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
src: local('☺'),
url('http://static.tumblr.com/ctwb3zj/n4Zlfluv6/zegoelight-u-webfont.ttf')
format('truetype'),
url('http://static.tumblr.com/ctwb3zj/ovQlfluz3/zegoelight-u-webfont.svg#font')
format('svg');
url('http://static.tumblr.com/ctwb3zj/1AJlfluwz/zegoelight-u-webfont.woff')
format('woff');
}
That just cleans a couple of minor things up. I'd also suggest changing your font name to something other than "S"; "Zegoe Light", for example.
Ivo Wetzel is correct from your comments though, this may be an issue with the way Tumblr serves up media with unknown file extensions.
I've had a similar problem, it worked everywhere, but not in Firefox4 on a Mac. I declared the #font-face-Stuff inside another #media block (only loading fonts for non-mobile devices) - and that's what caused the error.
This didn't work:
#media sth... {
#font-face {
...
}
}
This did work:
#font-face {
..
}
#media sth... {
}