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;
Related
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
In our project we use Fira Sans Bold for thickening text segments. As a fallback we would like to use Lucida Sans Unicode with font-weight set to bold.
However, we run into a problem that we need to pre-set font-weight property for Lucida Sans Unicode.
What are possible ways to do this?
We tried #font-face.
#font-face {
font-family: 'Lucida Bold';
font-weight: bold;
src: local('Lucida Sans Unicode');
}
However, the problem is, while using Fira Sans Bold we rely only on the font-family and do not use any other other ways of thickening the font, such as font-weight:bold, strong, b, etc. This is insufficient for the #font-face (I raised the question over here: What can be the reason for #font-face failing to work?)
Would be grateful for any ideas.
I think a simple
.supposedly-bolded-text {
font-family: 'Fira Sans Bold', 'Lucida Bold';
font-weight: bold;
}
would do the trick for you.
Declaring font-weight/ font-style etc only affects which text 'matches' a #font-face rule.
As a font face is either bold or it isn't, declaring font-weight:bold won't force it to become bold. It'll just make it show up whenever your text is supposed to be bold.
Presumably the text that uses Fira Sans Bold is bold when font-weight of your text is normal. That means you'll want the bold face of Lucida to match whenever font-weight is normal, like this:
#font-face {
font-family: 'MyLucidaFont';
font-weight: normal;
src: local('Lucida Sans Unicode Bold');
}
"Whenever my text is font-weight:normal and uses font-family:"MyLucidaFont" then this font-face is applied"
Then:
font-family:"Fira Sans Bold","MyLucidaFont"
This is assuming that you can't change your Fira Sans Bold definition. If you can, then it'd be better to change that instead to make sure it applies whenever your texts text-weight is bold:
/* We don't need to declare Lucida at all if we change this one */
#font-face {
font-family: 'Fira Sans';
font-weight: bold; /* That's more like it! */
src: url('/FiraSansBold.woff');
}
Whenever your text has font-weight:bold and font-family:"Fira Sans","Lucida Sans Unicode" it'll be bolded with a fallback.
Keep in mind that "Lucida Sans Unicode" is a font family; a group of font faces.
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?
the following font style code does not work in firefox, I tested it in chrome and iexplorer and it works, so must be a compatibility problem.
font: italic normal normal normal 12px/15.3599996566772px Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
Can someone confirm it, or maybe there's an alternative for firefox.
FIX:
font: italic normal normal 12px/15.3599996566772px Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
For FireFox, you should set all the properties without using the shorthand property. font: is the shorthand property for many other font properties:
Instead it should look like this:
font-family: monospace;
font-size: 20px;
font-weight: bold;
color: blue;
http://www.w3schools.com/css/css_font.asp
http://www.w3schools.com/cssref/pr_font_font.asp
This appears to be a bug in Firefox. In the Developer Tools, no errors are shown, but when inspecting style sheets, the styles for the element are empty.
A quick workaround is to remove of the normal keywords (or all of them, since they are redundant: all sub-properties not set explicitly in a font shorthand are set to their initial values).
P.S. Your code is correct, Firefox just does not handle it well. As a reference to font shorthand syntax (if you use it), use the W3C CSS 2.1 specification.
For google fonts the font-family and font-weight are variables. The short syntax should be
font: 400 "Open Sans", Helvetica, Arial, sans-serif;
But I get invalid property value,
Is there a way to declare just font-weight and font family in the short version? I want everything else to stay as it is (font style etc)
I believe the font-size must be specified when using font shorthand.font: 400 12px "Open Sans, Helvetica, Arial, sans-serif;
See http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/ and http://www.w3.org/wiki/CSS/Properties/font
You'll need to use the good old font-weight and font-family instead of the shorthand.