I'm using Cufon to add a Custom Font to a fair bit of content on my site.
I would like to use the Cufon on the default value of a text input field. But it isnt working, Its just loading the default font on the page. Is there any way I can do this?
Example of this is here
Any help appreciated..
You cannot do this using cufon. Cufon works by changing your markup and inputs do not contain markup. You'd have better luck with #font-face (try http://www.fontsquirrel.com/) to do this.
If you insist on using cufon, you could display a span with the cufon'd text over the input and on click hide the span and set focus to the input.
Related
Often we can see CSS coding practices that use pseudo class such as before or after along with content inside it to eventually make it become an icon. such as
.email:before {content: '\e600'; font-family: special-font}
I think this question could be more relevant to how font-family works to render icon. Any idea on how does this works are welcome or point me some directions that I can do more research.
Maybe this will help?
Icon Fonts: How do they work?
Basically, the content code maps to a point in the font. The font is actually an icon. That css is a way to place the icon in the content without actually specifying it in the html content.
Full explanation here: https://webstandardssherpa.com/reviews/responsive-webfont-icons/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffereac5b&utm_medium=google
I'm editing the CSS of a WordPress theme in order to make it fit my needs better. I've come across what, as far as I can tell, retrieves the favicon for different social media sites.
.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }
I follow that it looks for flickr.com in the url I provide, but what's the content property doing? How could I change the content field to support another site, such as StackOverflow?
Like #Paulie_D said, icon fonts.
The content property is pointing to a Unicode character in a icon font set. The CSS selector is prependnig the icon (via pseudo element) to an anchor element <a> that has a link that contains flickr.com.
This might be a coincidence but the current version of FontAwesome uses the same unicode character \f16e for Flickr.
As far as "supporting other sites, such as StackOverflow," you'll be at the mercy of the icon font. What ever the icon font provides is what you can use.
If the site is indeed using FontAweseom then you'll have quite a few icon options available to you, including StackOverflow \f16c. Here is a list of all the FontAwesome Icons.
I'm using Wordpress.
Is it possible to set a font-family for RTL text and headers (I'm not using WPML or Polylang, just text aligned to right and written in Arabic), different from the one my theme uses as default? ie. keep the default font of my template for English language, but use a different font for text and headers (h1, h2…) aligned to right (or written in RTL language like Arabic and Hebrew).
How do I do that using my themes's style.css or a custom css?
Thanks.
This is tricky, and it really depends on what exactly you want to achieve and how you do it. You can, however, take advantage of the fact that RTL blocks (and inline text) uses the dir="rtl" property to set a general CSS rule that captures the elements that have those properties.
For example:
<h1 dir="rtl">עברית</h1>
And then add a CSS rule like this:
*[dir="rtl"] {
font-family: serif;
}
This isn't perfect and you might have to have some adjustments, but it could at least do the trick. You need to make sure all of your RTL text is defined with dir="rtl" -- which is a good practice regardless, and what W3C recommendations are.
You can check this jsfiddle as an example (I added colors to the rule to show how it affects the relevant RTL pieces).
I met a person who can't stop writing everything in uppercase in the internet. She has eye problems and just doesn't want to zoom in and out all the time to read lowercase.
I would like to write a CSS style sheet that converts all the text in a page to uppercase. With some googling I can do this alone, but if anyone can help me here that would be useful.
Most important, I want to apply this CSS sheet to the browser: is this possible?
To make everything uppercase use * {text-transform:uppercase;}
jsFiddle example
It's possible to change the browser's default style sheet however each browser has a different way of doing this.
One of the simplest ways is probably to use Stylish in Firefox. It lets you add a style sheet to be applied on all pages, in a manner that is easy to switch off then needed. And you could simply write
* { text-transform: uppercase !important; }
Without the !important specifier, the style sheet would be ineffective as regards to elements that have text-transform set in page style sheet.
Note that this only changes the display of characters. When typing text in a textbox, without using the shift key, it would be displayed in upper case but, upon form submission, as well as in any scripted processing in the browser, it would still be in lower case.
So, I know that this isn't something that is normally a good idea for a website, but I have a special purpose/intent for such a use:
I have a multilingual dictionary that I'm working with online, where I need one of the languages to be in a specific font, from a file that I specify locally. However, I want this language to be rendered ONLY in this font, as if it is rendered using any other font, it will render incorrectly. That's all fine and dandy, and I can load the file in CSS and whatnot.
But I want to make it so that if it can't load that file, either for one reason or another, or something goes wrong, it can't go to another font. Basically, render this text using this font, and if you can't do that, don't just try and render it with Arial or whatever is the default -- show me blocks, show me a stark something.
I've spent a bit looking around, but am not sure what in CSS I would be using for this. Suggestions/help? Thanks :)
As an update to this question, since April 2013 there exists the Adobe Blank Font, which can be used for that purpose.
You may build a cross-browser css with FontQuirrel WebfontGenerator and the Adobe Blank font files.
If you just need the font in OpenType format you can use this single css file with the already embedded font
You can't do this. Text is text and text has to have a font that it is to be rendered in. If you really want, there's probably some weird JavaScript function that can detect the actual font being used for the text and if it doesn't match the one you want, then you can hide it or something. But in the end, your only option is to have the text displayed in some obscure font, or completely hide the text. If the text is visible, it has to be rendered using some font.
You could also theoretically create your own font where all the characters are just blank, but that seems highly illogical and such a waste of resources to make people download a font just so it can display meaningless emptiness.
There is no "don't render fonts" option. It's a font, it needs to be rendered, or else it's hidden visually in the DOM.
You could use Javascript to find out the font being applied to a certain block, and if it's not the font you want, just hide it. Or display a message.
Another solution is somehow specify the content to be empty. For example, I'm trying to override the +/- character that a Webix tree displays using Font Awesome:
#lhn-tree-container .webix_tree_open:before {
content: '';
}
This only works with the :before and :after pseudo-elements though.