I have some problem with #fontface in Google Chrome. The font is rendered too high.
When I change the font to Arial, the button is allright in all browsers. When I change it to the #fontface font the text jumps up.
Below are 2 images that show the difference between Firefox and Chrome.
What can I do?
I've tried:
-webkit-font-smoothing: antialiased;
Also I added the following for all the fonts right after the font declaration:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'Museo-Sans-Rounded-100-Regular';
src: url('../fonts/Museo-Sans-Rounded-100-Regular.svg') format('svg');
}
}
Both didn't help.
What can I do? All the help is very welcome!
Thanks to Vira for pointing to the right post. The solution can be found here:
#font-face svg not working properly in Chrome?
Related
My font-face is working properly on:
Desktop Chrome
Desktop Firefox
The same font-face call is NOT working on:
Desktop Safari
iOS Chrome
iOS Firefox
iOS Safari
You can see the landing page with the font-family call for the site/company name here: Derek Erb Solutions
The font-family declaration:
#font-face {
font-family: 'Dce_handwriting';
src: url('/fonts/DceHandwritingRegular.woff') format('woff'),
url('/fonts/DceHandwritingRegular.ttf') format('truetype'),
url('/fonts/DceHandwritingRegular.otf') format('opentype'),
font-weight: normal;
font-style: normal;
font-display: fallback;
}
The font-family call:
#sitename {
font-family: Dce_handwriting, sans-serif;
font-size: 6em;
margin: 0 auto;
}
Looking around at similar problems here I made sure to remove the dashes and underscores from the file name and include the "src:" in the font-family declaration.
I have probably been looking too long at my own code to see the problem any more... but it is particularly frustrating.
As always the biggest part of the problem was a stupid semi-colon!
That last line should read:
url('/fonts/DceHandwritingRegular.otf') format('opentype');
With the all important semi-colon at the end of the line instead of the comma.
This fixed the problem on just about all of the browsers...
DUPLICATE CLARIFICATION - This question relates to cross browser differences in font weights, the question highlighted as possible duplicate relates to uploading font files correctly.
I'm uploading a site onto Wordpress using a child theme of html5blank and am getting variations of font-weights across different browsers which I'm not getting with just the stand alone front-end text files.
This is what I mean on text for a hover effect -
Chrome/Safari
Firefox (this is what I want)
I've tried to use the code from the answer of this stack question
body {
-webkit-font-smoothing: subpixel-antialiased;
}
But that hasn't worked. If I use font-weight: bold; then it works for Chrome but throws out Firefox and Safari. This is the font I'm using -
#font-face {
font-family: 'Gotham-Light';
src: url('fonts/Gotham-Light.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Gotham-Light', sans-serif;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
Is there any way I can fix this? The client is a design professional and was quite specific on stuff like this. Any help appreciated.
First, you should have all of the font types associated with that typeface for cross-browser compatibility:
CSS3 Web Fonts
You can actually make them here:
Font Squirrel Webfont Generator
And sometimes you cannot control how browsers will handle different fonts. Safari will act totally different than Firefox, etc.
Lastly: It does help to use actual font WEIGHTS instead of the default "bold" and "light".
Example:
body {
font-family: 'Gotham-Light', sans-serif;
font-weight: 300;
font-size: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
I hope this helps.
I seem to have a problem the other way round some people have here.
Here is the deal. http://www.mb-events.de/wordpress/ renders wonderfully on IE, Chrome and Firefox. However on Safari information like price and testimonials are displayed differently and I just can't find out why. The Google Webfont I use for that is 'Cabin'. I would post a side-by-side comparision, but can't due to being new.
I tried setting different fallback fonts and searched wether Safari does not like Google Webfonts in general.
My CSS is
.entry, .entry p {
font: 300 15px/1.5em 'Cabin', arial, sans-serif;
}
Did you try moving the stacking order of the web font your calling. I've always found that adding the svg type to the top of the stack always helps maintain the readability.
As an example:
#font-face {
font-family: 'encode_widelight';
src: url('encode-sans/encodesanswide-300-light.eot');
src: url('encode-sans/encodesanswide-300-light.eot?#iefix') format('embedded-opentype'),
url('encode-sans/encodesanswide-300-light.svg#encode_sans_widelight') format('svg'), /* Place your svg font here */
url('encode-sans/encodesanswide-300-light.woff') format('woff'),
url('encode-sans/encodesanswide-300-light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
You could also try adding font smoothing to your css:
html {
-webkit-font-smoothing: antialiased;
}
My Samsung Galaxy S3 phone recently upgraded from Android 4.1.3 to Android 4.3. Now several websites I designed which I tested in the Android internet browser are not displaying fonts I have declared with #font-face. What do I need to do to fix this?
One of the sites (development version): http://beta.kdfansite.com
Here is some of the related CSS for Open Sans:
#font-face {
font-family: 'OpenSansSemibold';
src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot');
src: url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.woff') format('woff'),
url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('http://beta.kdfansite.com/wp-content/themes/scrollider/scrollider/webfonts/Open-Sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
font-weight: normal;
font-style: normal;
}
/* ... */
h2 {
font-family: 'OpenSansSemibold', Arial, sans-serif;
/* ... */
}
Each font I use on the site is declared in a similar way. The Great Vibes declaration (also in custom.css) for the "enjoy your ride" message is another one to compare. All fonts display properly in Chrome for Android and Firefox for Android on the same device, but not in Android Internet.
I need to finalize this CSS as soon as possible and am working on this project as a volunteer (not paid). So I am looking for a quick fix rather than a code review. I'm also a UX designer, not a web developer. Thanks in advance.
Edit: I did some additional debugging today in Edge Inspect CC and weinre, connecting both my Android phone and my iPad to my laptop. In Weinre, I am able to change the font families on the iPad but not on the phone. I can change the font colors on both devices. So it appears the underlying issue is related to the fact that I can't change the fonts off of the defaults when I use a remote debugger.
I have the same issue here how i solve it.
I only use svg on mobile with media queries.
#media only screen and (max-width: 320px) {
#font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
#media only screen and (max-device-width: 720px) and (orientation:portrait) {
#font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
#media only screen and (max-device-width: 1280px) and (orientation:landscape) {
#font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
Hope it's help you.
We were running into a similar issue, and it was caused by our use of text-rendering: optimizeLegibility - removing that from our CSS made our fonts start working on 4.3 again.
I create jsfiddle with only svg and woff fonts and test it on my Android 4.3 device in default browser. All works.
I just remove all unnecessary fonts for mobile. All mobile supports svg fonts, FF and IE10 needs woff. So you can use media queries for separate font-face defenition: for mobile and for desktop.
If you need all types of fonts check your Content-Type header for font files, it's always text/plain which is wrong:
eot has application/vnd.ms-fontobject type
otf and ttf have application/octet-stream type
woff has application/font-woff type
svg has image/svg+xml type
Also check this page to read known common problems with font face.
I had a similar problem before and I solved it by adding font-weight: normal !important;to the elements/text that was using the font. I believe the problem was that the font weight was being inherited by the elements and this caused the font to fail.
Hope it works :)
So in your code:
h2 {
font-family: 'OpenSansSemibold', Arial, sans-serif;
font-weight: normal !important;
/* ... */
}
You could also maybe use Beacouron's solution of the media query targeting mobile, but this may be difficult if you have various Android tablet resolutions to target to.
Another idea maybe to use a media-query targetting webkit browsers like so:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
I'm developping a website and I just realised there is a problem with my font rendering only on Safari and I don't find a solution.
Basically I used two custom fonts on my website.
One has a letter spacing of 0.05em to respect my psd file.
My font renders well on Chrome, Firefox, Internet explorer.. But for Safari, strangely, It does not work, the letter spacing does not render.
I read somewhere that it could be a problem with webkit, but if it"s the case why would it be working on chrome ?
It's really making the website horrible on safari and I need to find a fix.
I cannot believe that there is no possible fix for this.
If you have any idea it would be with pleasure.
Below are my code.
Css declaring the font:
#font-face {
font-family: 'univers_lt_std_59_ultracnRg';
src: url('fonts/univers-lt-std-59-ultra-condensed-webfont.eot');
src: url('fonts/univers-lt-std-59-ultra-condensed-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/univers-lt-std-59-ultra-condensed-webfont.woff') format('woff'),
url('fonts/univers-lt-std-59-ultra-condensed-webfont.ttf') format('truetype'),
url('fonts/univers-lt-std-59-ultra-condensed-webfont.svg#univers_lt_std_59_ultracnRg') format('svg');
}
Css of my paragraph:
color: #57585a;
font-family: 'univers_lt_std_59_ultracnRg';
letter-spacing: 0.05em;
font-size: 19.58px;
text-transform: uppercase;
-webkit-font-kerning: initial;
line-height: 26.47px;
Rendering on Chrome Firefox, and Internet Explorer
Rendering on Safari
Clearly the letter spacing does not work..
If you have any idea thanks again.
Try using pixels instead of relative values for letter spacing. Also, use round numbers for font-size and line-height. Safari has been known to round differently.