Bit of a strange occurrence with my web page, currently trying to resize the font of a facebook like button I have on my website.
Currently the HTML I'm targeting is:
<span id="u_0_3">2.1k people like this. Be the first of your friends.</span>
In the google chrome console adding either of the following will change the font
1.
#u_0_3 { font-size: 14px }
2.
span#u_0_3 { font-size: 14px }
but adding either of these lines of code to my web pages stylesheet has absolutely no effect. No clue how to proceed from here as it works in one stylesheet and not the other?
The reason the styles aren't updating when adding the code to your stylesheet as opposed to in the browser is because you're trying to a stylesheet on an iframe, which isn't possible. You can however add the styles using jQuery or something along those lines.
Try this...
$("iframe#idhere").contents().find("span#u_0_3").css('font-size', '14px');
Ensure that you have added CSS file reference in your HTML.
Also, clear browser cache and load the page.
I would like to use an embedded font along side Arial as a substitute. The embedded font requires a much larger font-size.
How can I make sure that Arial displays at 15pt, and Bebas displays at 20pt, for the same element. (For the same piece of text)
Thanks!
*Let me explain further:
I have a string of text. I want it to display as Bebas or Arial. When Arial is loaded as a substitute, it needs to have a different font-size and weight, as sharing the font-size doesn't work well for these fonts (Bebas is small).
You could use a script like FontChecker to check if a font is available. It relies on MooTools and gets called like this:
window.addEvent('domready',function() {
var fc = new FontChecker();
if (!fc.check('Bebas')) {
$$('.someclass').setStyles({'font-size': '15pt'});
}
});
If Bebas isn't available, it sets the font size for all elements with class someclass to 15pt.
Your CSS file:
.someclass {
font-family:Bebas,Arial,sans-serif;
font-size:20pt;
}
If you don't use MooTools, maybe there's a similar script for other libraries or vanilla JS (=plain JS without libraries). Or just rewrite it, it's quite short.
edit:
Some other scripts (I don't know them, I only use FontChecker):
jQuery: http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/
Vanilla: http://www.samclarke.com/2013/06/javascript-is-font-available/
Another vanilla: http://www.lalit.org/lab/javascript-css-font-detect/
Is there a way to change what text is displayed in a HTML file based on if the user has a certain font-face (preferrably without javascript)?
For example if there is a font-face 'AlphaIcons' I want to display:
<span>A</span>
Else I want to display:
<span><img src="apple.png">Apple</span>
(Giving the font to users without it is not an option in this case).
EDITED***
Check out this post - it may lead you in the right direction:
Changing Body Font-Size based on Font-Family with jQuery
In the first answer, it gives a new library that can detect fonts. If you can give it a true/false boolean, then you may be able to write in an image swap.
I believe CSS can do this already for you, using font-family prioritizes the fonts you want to use. If it can't find the first font on the user's system, it goes to the next.
http://www.w3schools.com/css/css_font.asp
Just use css like so:
span {
font-family:"AlphaIcons", "Times New Roman", Times, serif;
}
or am I missing something???
If you want to do some fancier fonts using javascript, check out Google's webfont library:
http://www.google.com/webfonts
You can't check this with pure HTML or CSS. You need Javascript to handle this problem.
Go through the following steps:
Embed the font files via font-face
Detect if font-face is avaiable in the clients browser with javascript. e.g. modernizr can do the trick
When font-face isn't available, insert the image into the span with the following code:
HTML
<span data-image="apple.png">A</span>
Javascipt
// check font face compatibility
if (!Modernizr.fontface) {
// replace each span content with the right image
$('span').each(function(){
// get the image
var image = $(this).data('image');
// insert this image into the span tag
$(this).html('<img src="'+image+'" />');
});
}
data-attributes are only one of many possible solutions. Just a little hint.
In general, there a no methods to check the availability of fonts without Javascript.
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 !
Hopefully I can explain this well and hopefully I'm thinking the right way :)
My question is, If I have a print style sheet that has a couple of classes that "displays" a background image, is there a way to make the browser download the images at the point of printing or do you have to preload the images.
I have mixed results doing a print styled background image with FF and IE. IE actually seems to download the image at print? where as FF doesn't - (even though Firefox's Live HTTP headers addon says it does!).
My code is basically saying this:
#media=screen
.class
{
display: none;
}
#media=print
.class
{
display: list-item !important;
list-style-image:
}
Not a great solution, but you could provide a "Print" button which modifies the style when it's clicked prior to actually printing and changes it back afterwards?
For example (using jQuery):
<script type="text/javascript" language="javascript">
function doprint() {
$('.class').css('display','list-item').css('list-style-image','img.jpg');
window.print();
$('.class').css('display','none').css('list-style-image','');
}
</script>
<input type="button" onclick="doprint();" />
Obviously you can get around this by using the browser's Print function.
There's also the issue of the overhead you've saved by not preloading the image being well and truly used up by using jquery and script...