I'm importing
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900')
and using
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
and I end with having all my text italic in Safari on my iMac.
In Safari on my MacBook (exact same version) or in Chrome on my iMac it is normal as it should.
I don't load any extra stylesheet in the Safari Extensions.
What could lead to this italic text?
Try using
font-style: normal;
This may solve your issue.
Ref: https://www.w3schools.com/cssref/pr_font_font-style.asp
Related
I want to use a custom font on safari to increase readability, but Safari doesn't seem to have an easy way to change fonts. I tried to use Safari's support for custom CSS stylesheets but the font still isn't rendering, what am I doing wrong with this?
#font-face {
font-family: 'Comic Code Ligatures';
font-style: normal;
font-weight: normal;
src: local('Comic Code Ligatures'), url('./Comic Code Ligatures.otf') format('opentype');
}
body {
font-family: 'Comic Code Ligatures';
font-size: 16px;
}
I have a weird issued when setting the font-family in a css styleSheet to render html in a WebView.
I imported 2 fonts in xcode (Arial Rounded MT Bold and Arial Rounded MT). Those fonts work perfectly in Text components, but in WebView, only Arial Rounded MT Bold works. I use this to set the font:
const styleSheet = `* {
font-family: "Arial Rounded MT Bold";
font-size: 11px;
color: ${appColors.textGrey};
}`
Any idea how to make Arial Rounded MT work?
I finally found the answer, it's dead simple.
It works when I write it like this:
font-family: 'Arial Rounded MT', Arial, sans-serif;
The width of the space character (char code 32) varies in my text. This occurs in Firefox and Chrome. You can see the difference between the fullstops and C's in the below screenshot.
Relevant CSS:
#font-face {
font-family: "NewsGothDmBTWXX-Demi";
src: url('/wp-content/themes/bluedot/fonts/NewsGothDmBTWXXDemi/font.woff2') format('woff2'),
url('/wp-content/themes/bluedot/fonts/NewsGothDmBTWXXDemi/font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p {
font-family: "NewsGothDmBTWXX-Demi", helvetica, arial, sans-serif;
font-size: 20px;
text-align: left;
}
What I've tried:
Checked that I don't have the custom font installed on my machine.
The spaces are even when using the fall back sans-serif font
The spaces are definitely the same characters (asci 32)
Changing various properties like letter-spacing, font-kerning and text-rendering
The issue was due to being displayed wider than a regular space.
This was difficult to pick up on as viewing the source in both Firefox and Chrome didn't display the - I only picked up on this when copy and pasting from view-source to an IDE.
I have several google fonts which I import into stylesheet with using #import rule. All of them render fine except of Roboto Condensed. It falls back to default sans-serif font, in my case Helvetica.
#import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400&subset=latin,latin-ext);
font-family: 'Roboto Condensed', sans-serif;
font-style: normal;
font-weight: 400;
I already tried removing local Roboto font, changing font-weight and font style, playing with font-family name but dev tools still show that the rendered font is Helvetica. Other Google fonts render just fine. What could be an issue?
Included #import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400&subset=latin,latin-ext); in my stylesheet and
html, body {
font-family: 'Roboto Condensed', sans-serif;
font-style: normal;
font-weight: 400;
}
worked just fine for me. Do you have any errors in your console?
Anyone come across with this issue?
Windows 7 Chrome web font OTF issue:
I have a web font and adding it with css3...Looks great in FF/IE(or takes the backup)/Safari but in Chrome(Windows) it looks pretty awful:
I tried this: -webkit-font-smoothing: antialiased;
...Which fixes it in Safari but not Chrome and saw here that Mac should work:
Does -webkit-font-smoothing only work on Mac browsers, Not windows?
I checked this too: http://maxvoltar.com/archive/-webkit-font-smoothing
Here is what i have:
#font-face { font-family: SeravekBasic; src: url('/fonts/SeravekBasic-Regular.otf'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased;}
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;}
html, button, input, select, textarea {font-family: SeravekBasic, Arial, Helvetica, sans-serif; color: #000; }
Lastly I tried Mozillas text-rendering see if this would help webkit but nothing:
https://developer.mozilla.org/en-US/docs/CSS/text-rendering
....Not sure if there is something else that can resolve this.
I wouldn't recommend using OTF for webfonts. It causes some rendering issues for people using Windows XP. You're going to have to use a bulletproof font-face syntax with a media query specifying SVG for chrome.
An example for PT Sans
#font-face {
font-family: "PT Sans";
src: url("ptsans.eot");
src: url("ptsans.eot?#iefix") format("embedded-opentype"),
url("ptsans.woff") format("woff"),
url("ptsans.ttf") format("truetype"),
url("ptsans.svg") format("svg");
font-weight: normal;
font-style: normal
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: "PT Sans";
src: url("ptsans.svg") format("svg")
}
}
Chrome uses an older font rendering system, so it doesn't show fonts as clearly. Chrome fonts look best with SVG so you have to specify a media query to serve only Chrome the SVG file. You can find more information on the syntax here: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax.
You should include ttf, eot, woff, and svg formats in your #font-face syntax. The browser won't download each one, it will only download the one it needs. It also adds appropriate fallback. This should solve most of your font rendering issues.You can get the appropriate files for your #font-face rule by using the fontsquirrel generator: http://www.fontsquirrel.com/tools/webfont-generator.
So my solution was to convert this to embedded Open Type:
.eot and also add .woff for other browser support.
This is actually great because it works fine in IE9 (even IE8)
:)
src: url('/fonts/SeravekBasic-Regular.eot');
src: url('/fonts/SeravekBasic-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/SeravekBasic-Regular.woff') format('woff');