So, I pulled Arial over onto Linux from my former Windows distribution, but I then had to fight with the 12px Arial issue. I fixed that as suggested by resizing it to 13px, but I decided that I actually much preferred Google Calendar in Liberation Sans as I'd had it before.
I've used Stylish to fix that for the main part of the calendar, but I can't get the Google Tasks section to use Liberation Sans because it uses much more complex/strange CSS selectors.
Firebug says the font-family of the Tasks section is defined by div#:x.tl.U, with HTML
<div id=":x.fc" class="bb" style="height: 165px;">
<div id=":x.tl" class="U Rb">
<table class="v" cellspacing="0" cellpadding="0" style="width:100%">
(lots more nested tds/divs here)
</table></div></div>
but using
div#:x.tl.U {font-family: "Liberation Sans", Arial, sans-serif !important;}
or even
div#\3a x\.tl.U {font-family: "Liberation Sans", Arial, sans-serif !important;}
doesn't produce any results. For the main (month / 2 weeks view) section,
div.st-c-pos {font-family: "Liberation Sans", Arial, sans-serif !important; }
works fine (altering exactly the element Google uses to define the font-family).
How do I work with these selectors? I do know some CSS but that kind of complexity is beyond me. (Also if someone could explain what the different "., :" etc. parts mean...?)
Edit: It's not just the Tasks section, the week view also displays a mixture of Arial and Liberation Sans. I've defined the font-family for the body element as well, but that doesn't really seem to inherit... Any better ideas than just hunting down every single declaration of Arial in the page and replacing it manually?
Adding that HTML does help, though as you say, that ID name is pretty weird. However, your first shot at div#:x.tl.U looks right to me, as it chains the ID and class. So it's most likely that the inner elements also have a font-family declaration of Arial that is overriding your rule.
I suppose, as a test, you could try something like this, though it's a bit of a sledgehammer option that may not suit anyway:
body * {font-family: "Liberation Sans", Arial, sans-serif !important;}
Otherwise, have a look at the inner elements and see if any of them have explicit font declarations.
Related
I'm trying to get something like this to work:
body {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Helvetica, inherit;
}
Basically if "Helvetica" is not available on the client's browser, I want the font-family to be inherited from a parent. But it seems to me that I can't use "inherit" in a font priority list.
How can I achieve something like this without having to copy paste font-family from body?
You are correct. You can use it just like you did. This is something that became available with CSS2. This question is similar and has some answers worthy of a read.
I think the real problem is that Helvetica isn't a free font. So, it just isn't available for widespread use.
Option 1) If you own the Helvetica font, make an image using that font
(for the few lines that you want that specific look for).
Option 2) (as #bjupreti suggested) is to use a substitute font that is widely
available.
Font family will automatically be inherited from the parent property. So, all you have to do is:
body {
font-family: Verdana, Arial, sans-serif;
}
p {
font-family: Helvetica;
}
This will automatically inherit the font family of body if there is no Helvetica in end users computer.
I've got Semantic UI working just fine with my Meteor app (both latest versions), using SUI default theme. I only want to change the font from Lato to Roboto - just that and nothing else.
I've tried adding #fontName: "Roboto" to /site/globals/site.variables.import.less - still, everything comes up Lato.
The documentation is not very clear (to me at least!) so I further tried adding #fontName: "Roboto" to every single file that didn't start with DO NOT MODIFY - still, Lato everywhere.
Also tried adding body {font-family: "roboto"} in the SUI variables and main.css - still Lato.
I don't know what else I can try - SUI is so nice to use I thought something simple like changing font would be no trouble. Any ideas?
SUI does indeed download Google Fonts for you. But you have to let SUI know which fonts you want in a particular manner.
This is an example from here.
#headerFont : 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
#pageFont : 'Oswald', 'Helvetica Neue', Arial, Helvetica, sans-serif;
#googleFontFamily : 'Open+Sans:400italic,400|Oswald:400,700';
You might just need to include the Google font you want in the #googleFontFamily variable along with the proper styles and weights
P.S. You'll have to add this in your src/site/globals/site.variables
As we know when register any google font url in your website and then can use it during font-family css property, after each google font name we see the Generic font families name like sans-serif, serif, cursive and monospace like these exapmles below
font-family: 'Tulpen One', cursive;
font-family: 'Ubuntu', sans-serif;
font-family: 'Trykker', serif;
font-family: 'Ubuntu Mono', monospace;
Is google fonts work with font-family property without using Generic font families name? and only using google font name? like this examples below
font-family: 'Tulpen One';
font-family: 'Ubuntu';
font-family: 'Trykker';
font-family: 'Ubuntu Mono';
This question highlights a misunderstanding of CSS - the font-face rules you get from google tell the CSS engine which bytecode to use as font-resource for specific font families (and at which style/weight). That's all it does, and can do. Whether you use external fonts from Typekit or Google or github.io or even your own locally hosted ones.
In contrast to this, your page CSS is responsible for saying which font-families the browser should used for specific content: if you list one or more font-families then the browser will try each of those until it finds one that supports the text it needs to style, and it checks that for every letter. If there's a single letter that isn't supported by one font-family, it'll check a next font. And if it runs out of fonts to check (for instance, you only lists a single font-family value) then the browser will just guess, and pick whatever it feels like, which you don't want it to do.
So you (and only you) get to make sure your page CSS has a correct font-stack. Especially when you rely on external font resources, it's entirely realistic that some of the time those will not be available and your font-family instruction for that font will fail: what then? So at the very least always add the generic font family, but also add one or more of the "websafe" fonts in between. Will it look perfect? No, of course not, but it will look better than a complete guess by the browser.
Keep your generic category keywords, and add some more:
font-family: Ubuntu, Tahoma, Geneva, sans-serif;
Use full font-stacks, because you don't control the internet. Plan for when it doesn't do what you want.
I'm using the Inspect Element function of Firefox to determine which font-family is used on a certain element.
In my actual case I can only find font-family definitions which are stroked through in the rules pane. I thought they have been overwritten in a higher position from another CSS rule. But there is no definition for font-family which is not stroked through all over the rules pane.
The up-most one shows like:
.helvetica-neue-websave {
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif
}
On the other hand when I look at the font pane of the inspector I see that the font-family for my element is Helvetica Neue Condensed Bold but I can not find out, where it was defined.
edit: the computed pane states it uses HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif but it is definitely the condensed version.
So, may anyone can guide me how I can find out where this font-family definition is placed???
It is not in the HTML itself and in none of the CSS files which I see in the rules pane.
Hope my question was clear and sorry for my english
Do you see that the font-family is "Helvetica Neue Condensed Bold" or do you see that the font resource used for the font-family is "Helvetica Neue Condensed Bold"? Because those are two completely different things. It sounds like the latter, in which case: CSS asks the browser for "a font" based on the names provided.
The browser checks if it has any explicit resources bound (using #font-face) and if not, it asks the OS for a font that matches the name CSS specified.
If the OS can't find them, CSS falls back to the next font and tries again. Steps 1 and 2 repeat until we run out of resources.
At any point, the browser or OS are allowed to go "yeah I found something" provided the name a resource they know of matches "well enough", so if you ask for Helvetica Neue, and the OS ends up being asked for that, then it can go "oh yeah I have a Helvetica Neue here" and then give the browser Helvetica Neue Condensed. That is 100% acceptable: it's one of the many legal matches for "Helvetica Neue" because that's the actual family name, and "Regular", "Condensed", "Thin", "Oblique", etc. are not.
If that isn't acceptable to you as develop, then your CSS needs to become more precise: either start only accepting 'Helvetica Neue Regular', which is a bad plan, or load an actual font so that you properly control which font will get used, without the OS getting consulted. Especially for a font that only Mac users will have installed (unix, linux, and windows users all do not: and would need to buy it first), and so is a guaranteed breaking on other platforms.
Create an #font-face rule with the font you want, with a font-family like ContentFont (so that if you want a different font later, all you have to do is replace the src binding, without changing any content CSS) and then point that to a true .woff font resource (without using local() because again, no guarantee you'll get what you ask for, it might resolve "good enough" while to human eyes being absolutely wrong)
I have a rails project I am using bootstrap+compass on.
The default font family is:
"Helvetica Neue", Helvetica, Arial, sans-serif
However my fonts are displaying in Times.
If you look at this screenshot taken from the "computed style" section in Chrome you can see that yes, it sees that as my font-family but is rendering Times anyways. Which isn't even a san-serif font, so the only way I can possibly imagine in which this would be the case is if I had no sans-serif fonts in my computer at all. Which is not the case!
Any ideas what is going on?