I have a web font family with different weights, such as
#font-face { font-family: 'merriweatherregular'; etc. }
#font-face { font-family: 'merriweatherbold'; etc.}
My site uses multiple fonts, and I am using this font on items such as p tags, as in
p { font-family: merriweatherregular, georgia, serif; }
There's some legacy text though that maybe wrapped in span, div or nothing at all.
There's text that's wrapped in b,strong,em, or i or a combination. When I style text as above p tag example, the bolded words therein are not in bold. Obviously, for the p tags I can use p b { font-family: merriweatherbold;} but not all the other random instances. And I can't apply the font-family to all b, strong since there are instance of that in another font altogether.
I found this tip but it's from 2010 and refers to a Safari bug, not sure if it's still valid.
What's the proper way to set this up so all the tags like b,strong,em, or i work as expected?
UPDATE
The tip linked to above and originally found here on SO seems to work still. Anyone know if there are any downsides?
UPDATE 2
There is an issue. IE8 doesn't work properly. It just showed all my text in the italic variant. It seems to want separate names. Thoughts?
Related
I am having issues with email templates:
Border bottom not showing
Font fallbacks on Windows not working
So: I run the HTML through an inline generator that puts everything inline
Border issue:
<tr class="bottom-border">
.bottom-border {
border-bottom: 1px solid #eff3f6;
}
Font issue:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700);
body {
font-family: 'Open Sans', "Helvetica", "Verdana", "Arial", sans-serif !important;
}
The font issue wont work on Windows, it still seems to output Times New Roman, even though im not telling it to. On the MAC its fine it outputs Open Sans
Aha, I see what the issue is with the font.
You need to add the font styles to the table not the body.
<table style="font-family: 'Open Sans', "Helvetica", "Verdana", "Arial", sans-serif !important;">
Then is you have nested tables this will also need to be applied to those too.
I also need to see the output of the inline generator to see why the border isn't being applied.
Outlook HATES webfonts. It won't display them, and if it seems one at the beginning of the font stack, it will empty the entire stack and go instead with the default font. To counter this, I have a few steps below for you:
You are screwing up your style attribute with using the double quotes (")
around helvetica and on. It is closing the style attribute at at the
second double quote (right before helvetica) which removes your font
stack. It then also has potential for validation issues. You do not
need the quotes on the fonts, so I would either remove or just use
single quote (').
You should always inline your font on the tag that contains it (TD,
DIV, P, etc). This is where you should put your stack WITHOUT the
web font.
You then need to add a span tag inside the container and around your
text which will have your webfont declared there.
As far as border bottom:
Don't use a class. You need to inline it.
Ex: <td style="border-bottom: 1px solid #eff3f6;">
Don't apply styles to TR tags, use it on TDs for much more
comprehensive support of CSS.
I'm working on a project where the height of the content container is limited, and on a few select browsers (mostly Chrome on Android) the text seems to be breaking in different places, even though almost all font properties seem identical, so far I've checked:
Width of the container element
font-size
line-height
font-family
letter-spacing
All of which are identical, both in their given and computed values.
This wouldn't usually be a massive problem, but because of the content container height constraint, these discrepancies are causing me a massive headache.
I've managed to replicate the problem in a fiddle with the following code:
HTML
<p>We are not able to sleep or We cannot sleep.</p>
CSS
p {
font-family: "Times New Roman", serif;
font-size: 11px;
font-style: italic;
letter-spacing: 0;
max-width: 200px;
}
The text in this example renders on one line in the majority of browsers, however in some the last word "sleep." appears on a new line.
You can see screenshots of this example in a number of different browsers at:
http://www.browserstack.com/screenshots/cf75bb4fa9a22db2e660a0073698be86b55becb6
Is there something I'm missing here? Is there any way to ensure the text will render in the same way accross a number of devices and browers?
The details of font rendering vary by browser and platform, and they cannot be controlled in CSS. Besides, different computers may have (slightly) different fonts under the same name, or e.g. lack Times New Roman entirely (most smartphones lack it, for example).
As a workaround, if specific line division is crucial, consider writing the text as preformatted (i.e. dividing it into lines in HTML source the way it should appear in display) and using white-space: pre. The drawback is that some lines might hit or even cross the right edge of the area reserved for the element. But if you do not set a background or border, this will be barely noticeable.
I'm afraid that the only solution here is using an image using width="XXX" or tell the client that is completely impossible to make a web identically on every browsers unless you use disgraceful methods just like using an image instead of text.
I was able to solve the problem in my browser by replacing the max-width with min-width see this http://jsfiddle.net/79j57L8L/4/
p {
font-family:"Times New Roman", serif;
font-size: 11px;
font-style: italic;
min-width: 200px;
}
I want to put tags around a some text without changing whatever font family and font size the text has already inherited. I could redefine the CSS for h1 so that nothing is said about the font-family or font-size but then the values from the user agent would just come through. I need to define the CSS for h1 in a way that the user agent values are killed, something like
h1{
font-family:none;
font-size:none;
}
But I don't think that will work.
Thanks
Just use the inherit keyword.
font-family: inherit;
font-size: inherit;
I can't think of a good reason for making the most important heading in your document indistinguishable from body text though. It runs the risk of being treated as a spam flag by search engines.
Please use inherit, this will work, which will inherit your parent style
font-family: inherit
Font size is simple:
h1 { font-size: 100%; }
Font family is trickier, and the most robust way is to declare the font family h1 and its parent together. Assuming that h1 is a child of body, you could use
body, h1 { font-family: Helvetica, Arial, sans-serif; }
These settings, like any settings you might set, are ineffective against user style sheet rules that override them, as well as against browser defaults when the browser has been configured to ignore font sizes and/or families specified on web pages.
However, they work wider than the use of inherit, which is not recognized by some old browsers.
My HTML text is just like this:
<p>abcdefghijklmnopqrstuvwxyz</p>
What I want is to display a-n using "Times New Roman", and display o-z using "Courier New", and this should be done using CSS, say, with no change to the HTML text.
Simply stated, I want CSS to automatically choose the specified font corresponding to which character it is.
a-n should be displayed using "Times New Roman";
o-z shoule be displayed using "Courier New".
Is there any way to accomplish this?
If this problem can be solved, another problem can be solved: display different language using different font.
Yes you can, using something called unicode-range It works in all modern web browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
BTW, more info about this from http://24ways.org/2011/unicode-range
Live example: http://jsfiddle.net/jfcox/3LQyr/
<style>
#font-face {
font-family: Foobar;
src: local('Times New Roman');
unicode-range: U+61-6E;
}
#font-face {
font-family: Foobar;
src: local('Arial');
unicode-range: U+6F-7A;
}
body{
font-family:Foobar;
}
</style>
<p>abcdefghijklmnopqrstuvwxyz</p>
If the characters belong to different writing systems, such as Latin and Hebrew, or Cyrillic and Greek, browsers often automatically use different fonts for them. However, this only happens to the extent that the page does not specify fonts, i.e. this relates to default fonts only, and the fonts used are determined by browser defaults and browser settings controlled by the user.
Although the technique described in JayC’s answer gives a partial solution, you get much better browser coverage by distinguishing the texts in different languages in markup. In a bilingual document, it suffices to use markup for texts in one of them (the one used less, for practical reasons). Using class as in gutch’s answer gives best coverage, but nowadays support to language selectors in CSS is so widespread that you might consider using the more logical lang attribute instead, e.g.
<h1>Hello − <a lang=ru>Привет</а></h1>
Then you would use rules like
[lang=ru] { font-family: ...; }
(My example uses an <a> element effectively as a shorter variant of <span>. Formally, this is possible only when the text is not inside an outer <a> element.)
However, for visual style, just the opposite of font selection by language would be needed. It really looks odd if the “e” in “Hello” is different from the Cyrillic “е” in “Привет” on the same line. It is almost always better to use the same font for all languages in a document, if possible. This means selecting a font that works for all of them.
You can't use CSS to change the font of particular characters as you describe, because the CSS selectors don't select individual characters — they select HTML elements.
So you would need to create elements around the blocks of text that need specific fonts. Ideally you would do that in server-side code, though I don't know whether that's practical for you. Your server would need to output HTML like this:
<p><span class="languageOne">abcdefghijklmn</span><span class="languageTwo">opqrstuvwxyz</span></p>
Then you apply the fonts as appropriate in your CSS:
.languageOne { font-family: "Times New Roman", serif; }
.languageTwo { font-family: "Courier New", monospace; }
I want to use a single font named "Algerian" across my whole website. So, I need to change all HTML tags and I don't want to write different code for different tags like:
button{font-family:Algerian;}
div{font-family:Algerian;}
The method written below is also highly discouraged:
div,button,span,strong{font-family:Algerian;}
Put the font-family declaration into a body selector:
body {
font-family: Algerian;
}
All the elements on your page will inherit this font-family then (unless, of course you override it later).
*{font-family:Algerian;}
better solution below
Applying a single font to an entire website with CSS
The universal selector * refers to all elements,
this css will do it for you:
*{
font-family:Algerian;
}
But unfortunately if you are using FontAwesome icons, or any Icons that require their own font family, this will simply destroy the icons and they will not show the required view.
To avoid this you can use the :not selector, a sample of fontawesome icon is <i class="fa fa-bluetooth"></i>, so simply you can use:
*:not(i){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the tag name <i>, you can also do it for classes:
*:not(.fa){
font-family:Algerian;
}
this will apply this family to all elements in the document except the elements with the class "fa" which refers to fontawesome default class,
you can also target more than one class like this:
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
* { font-family: Algerian; }
The universal selector * refers to any element.
Ensure that mobile devices won't change the font with their default font by using important along with the universal selector * :
* { font-family: Algerian !important;}
As a different font is likely to be already defined by the browser for form elements, here are 2 ways to use this font everywhere:
body, input, textarea {
font-family: Algerian;
}
body {
font-family: Algerian !important;
}
There'll still have a monospace font on elements like pre/code, kbd, etc but, in case you use these elements, you'd better use a monospace font there.
Important note: if very few people has this font installed on their OS, then the second font in the list will be used. Here you defined no second font so the default serif font will be used, and it'll be Times, Times New Roman except maybe on Linux.
Two options there: use #font-face if your font is free of use as a downloadable font or add fallback(s): a second, a third, etc and finally a default family (sans-serif, cursive (*), monospace or serif). The first of the list that exists on the OS of the user will be used.
(*) default cursive on Windows is Comic Sans. Except if you want to troll Windows users, don't do that :) This font is terrible except for your children birthdays where it's welcome.
Please place this in the head of your Page(s) if the "body" needs the use of 1 and the same font:
<style type="text/css">
body {font-family:FONT-NAME ;
}
</style>
Everything between the tags <body> and </body>will have the same font
Ok so I was having this issue where I tried several different options.
The font i'm using is Ubuntu-LI , I created a font folder in my working directory. under the folder fonts
I was able to apply it... eventually here is my working code
I wanted this to apply to my entire website so I put it at the top of the css doc. above all of the Div tags (not that it matters, just know that any individual fonts you assign post your script will take precedence)
#font-face{
font-family: "Ubuntu-LI";
src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}
*{
font-family:"Ubuntu-LI";
}
If i then wanted all of my H1 tags to be something else lets say sans sarif I would do something like
h1{
font-family: Sans-sarif;
}
From which case only my H1 tags would be the sans-sarif font and the rest of my page would be the Ubuntu-LI font
in Bootstrap,
web inspector says the Headings are set to 'inherit'
all i needed to set my page to the new font was
div, p {font-family: Algerian}
that's in .scss
*{font-family:Algerian;}
this html worked for me. Added to canvas settings in wordpress.
Looks cool - thanks !