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.
Related
I am using a downloaded font file for use on my website, however it is causing some issues in regards to layout / display.
Most fonts I have used display like this
The font I am currently using displays like this:
The difference is that the 1st font has space above (which is part of the actual text and not my css styling) while the second one has no space at all.
I can solve this issue by simply adding some extra padding to the containing element's top but this is not practical in the future event that I decide to replace the font (meaning I would have to go into every parent and remove the padding-top)
Is there any CSS styling methods I can use to add padding to my font so that it will always have a bit of space up top?
My Code:
CSS:
#font-face {
font-family: "Anakin Mono";
src: url("../fonts/opipik_anakinmono/anakinmono.ttf");
}
#demo {
font-family: "Anakin Mono";
padding: 14px 10px 10px 10px; /* Have to add extra padding to top becuase of font in use */
border: 1px solid black; /* A border helps illuminate whats happening with text alignment - vertically;
}
HTML:
<p id="demo">Some text on my website</p>
Is there any CSS styling methods I can use to add padding to my font so that it will always have a bit of space up top?
Unfortunately the answer to this question as you've outlined it is no, there are no CSS methods to target only a single font.
That said, you can simply assign your mono-spaced font by using a class and easily change the style globally as shown here:
#import url('https://fonts.googleapis.com/css?family=Inconsolata');
.monospace {
font-family: 'Inconsolata', monospace;
padding-top: 4px;
}
<div class="monospace">This element is monospaced font</div>
Any elements which you'd like to use your mono spaced font should be assigned the class monospace. In the future, you can simply change the font-family rule and alter the padding and voila, you've accomplished your change with very little effort.
I realize you've made it clear in the comments that you'd rather take a different approach, but I feel this is the absolute best solution/workaround that will get you what you want with the least amount of effort. At most, it will require you alter your markup to add the monospace class where needed, but this is probably a step in the right direction anyway.
You can make use of line-height. Change your CSS to this:
#demo {
font-family: "Anakin Mono", sans-serif;
line-height: 3;
padding: 0 10px;
border: 1px solid black;
}
You can try different values of line-height. It accepts multiple of original line height. px or em.
Always remember not to use only ONE font in font-family. Use more than 1 font to provide fallback fonts, in case your font is not loaded yet / unable to load.
Also, it's not advised to use self-hosted TTF font unless the file size is small. Try using CDN-hosted web fonts (such as Google Fonts) for better performance.
JSFiddle demo: https://jsfiddle.net/okawrcuf/6/ (I used another font that is available in Google Fonts for demo purpose, as I don't have your font)
I am using jQuery developed about lightboxes, and it is amazing.
However, I saw that the font of the captions and it don't fit to my website style...
I wanted to know if someone had an idea about how to change the webfont of this captions...
Font is changed by targeting the parent div and child element class or attribute and then specifying the font family.
e.g
<div class="light-box-sample">
<p> this could be a text</p>
</div>
Your CSS should look like
.light-box-sample p {
font-family: 'open sans' sans-serif;
}
Note : targeting .light-box-sample wont do the magic, the child element should be targeted also.
if there was no child element then the parent div could be targeted.
in the above CSS the first font indicates the universal font, and the double quote is used when the font has a space between its name literally like your first font choice , second font indicates a backup font that's located on all PC.
Generally you need to first download your font, and install locally on your PC to see the effect on your development environment and when you are done changing what you want to , you could add the CDN link of the font to the head section or whatever way to your design, so users who doesn't have that font installed on there computer could also see the font manifest.
hope this was helpful :-)
Enter code into lightbox.min.css to change caption font attributes:
.lb-caption {
font-size: 24px !important;
color: #727fee !important;
font-family: helvetica !important;
}
.lb-number {
color: red !important;
}
(.lb-number will change page number attributes)
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?
As I mentioned in the title, when using css font-family, custom font (font-face), it messes up (black background, black text (I guess)) auto complete drop down list in Opera.
input[type='text'], input[type='password'], input[type='email'], input[placeholder] {
font-size: 1.2em;
font-family: sans-serif;
color: #2A873A;
padding-left: 25px;
}
Code above works fine, but if I replace "font-family: sans-serif;" with some font-face font (google web fonts too), then problem starts.
Here is the screenshot of "bug" in action.
P.S. I should mention that that is Opera's native autocomplete, not custom js, dropdown list.
EDIT:
http://jsfiddle.net/burCR/
Have you tried specifying the font directly in your css? for example:
div.magicsomething {font-family:CustomFont,Customfont2,sans-serif;}
Keep in mind nested elements get stuck with custom fonts, so if you don't do the above, you may also very well need font-family:inherit in your 'nested elements'.
For extra help, please mention the name of the custom font, your full css and a live link to your site
Although this may be something obvious, check to make sure that your font is compatible with Opera. Here is a list of some web safe fonts.
http://www.w3schools.com/cssref/css_websafe_fonts.asp
And if that doesn't work try taking the font you want from microsoft word and use #fontface to insert you custom font instead of using a websafe one.
And finally try using your font-family on the form and have the input inherit the font.
Hopefully this helped.
Ditto to specifying the font directly. You may also want to try using base64 encoding, which in my experience works beautifully and with great cross-browser compatibility.
You can specify colors for both the background and the text individually.
input {
background-color: white;
color: black;
font-family: "My Fontface Font", Verdana, ms serif;
}
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 !