In my website, I want my header to use the 'Tw Cen MT Condensed Extra Bold' font. However, I am only able to create a font using 'Tw Cen MT Condensed' even with adding the bold effect, it does not look the same. I created the banner in photoshop and now I want to replicate the text in CSS.
Below is the link to my current code on Fiddle. Below that is an example of the text I want to create via Photoshop.
Also, is there a way so that I can include the same pattern from my background onto the text?
If all else fails, I could just upload the text itself as an image onto the website, but I would only do that as a last resort.
Thanks.
Link to Fiddle
Banner I want to create
Your going to need to find a web font version of that font for the best results, you can google for it or if the license for the font allows you to create one you can do that.
A good one is
http://www.fontsquirrel.com/tools/webfont-generator
And you'll have to include those files alongside your html and css to load it, otherwise someone who doesn't have the font won't be able to see it and the system will default to a different font.
Unfortunately, it won't work because the font is "non-standard"--as has already been explained.
To get the look you want, create the text banner you want in your image editor (Photoshop?) and save it as a ".png" image file, directing Photoshop to "keep transparency" (I'm using a different image editor, so the command wording will probably be different in Photoshop). To minimize file size, set the image frame bars as close to the font as you can (the more area a ".png" covers, the greater the file size--clear space included--and the size difference seems to increase exponentially [by square]).
All you'll have left to do is manipulate the position of the text banner in the div (float, padding, margin, etc.).
I know this is isn't the answer you want, but it works--and you don't have to worry about contingency code for different browsers, script blockers, etc. (you still have to code for the few who still block images and for accessibility standards, but IMHO it's more effective--and cleaner--than writing contingency code and having to allow for the variability between this font and the widest/narrowest contingency font in your designated family.
At least one part of your page will render the same in just about every browser.
Related
(Discaimer: I only learned to code alone and upload some contents.)
I retrieved a symbol for a running person and used the code to build an html file to upload. The problem is that the image appears in different ways in different browsers.
A temporary mwe example.
direct view in my site ramoneando.com
code snippet:
<h1><span style="font-family:'Segoe UI Symbol';color:black;font-size:40px;">🏃</span>runner</h1>
(Desired) Image on local browser.
Why does this happen and how can it be avoided?
I actually am OK with the variants. The worse thing is that some look to the right and others to left. I would prefer to remain with the first image, in dark filling and looking to the right.
The problem is that not every computer has the font Segoe UI Symbol installed, so the ones that don't just display the character with code 🏃 in the default font.
For example, this is what the snippet looks like on my computer
(It used the font Unicode Upper, if you're interested.)
So what you can do is any of the following:
Accept that the "Man running" symbol looks differently in different fonts and keep it the way it is
Use Segoe UI Symbol as a webfont (this may be overkill for displaying just one icon)
Or make a screenshot of the icon and turn it into a png file.
Hello I have a client who's logo is RP but the 'R' is facing the other way. I have been asked if it is possible to display 'RP' every time it is mentioned on the website to appear the same as her logo, instead of 'RP'.
My initial thoughts this was not possible but I have used font-awesome icons in a similar way in titles, but never using an image. This is an example of what I mean using photoshop.
Image Link: http://imageshack.com/a/img537/4474/guj5uS.jpg
I am very wary using this method at all as it must be made responsive etc and I honestly think it is more hassle than it's worth but maybe I'm missing an easy css trick...
Your help would be much appreciated.
Many Thanks
If you can contact with a graphic designer then the designer can make a svg image for you with "RP". That svg you can easily turn to a font using online font converter if you dont have professional software.
And insert the costum font you have created on your website just like inserting font awesome and/or all other icon fonts.
Is as easy as this ... nothing else that needs to be done, but always if the "RP" is in svg format (if you have a graphic designer at your disposal, or if your client can give you the RP logo in svg format).
The simplest approach is to use an image and scale it with CSS to suitable size. For best quality in scaled size, you would create the image in SVG format (there are online tools for converting other image formats to SVG, though ideally you should use an SVG file created by the artist who designed the logo). If you need to worry about old browsers (IE 8 and older) that do not support SVG, you can perhaps set content negotiation in the server so that its sends SVG to modern browsers that announce SVG support and PNG to others. But using just SVG:
<p style="font-family: Times New Roman">This is example text that
contains the logo
<img src="http://www.cs.tut.fi/~jkorpela/upload/RP.svg"
alt=RP style="height: 0.7em">
as an embedded SVG image. The height of the image is set to
0.7em without setting width. This means that browsers will scale
the image <img src="http://www.cs.tut.fi/~jkorpela/upload/RP.svg"
alt=RP style="height: 0.7em"> so
that is roughly of the same height as uppercase letters
and does not disturb line spacing.</p>
I have a few links that are slightly smaller (at their bottom part) than the rest of the text and I don't understand why is that and what I did wrong that could have caused this.
The problem exists here on following links: github, link, email, comment and lab.
If i move the list outside of #top_container, then the size becomes normal and the weird spacing at the bottom of these links disappears.
Does anyone have an idea of what I did wrong? Thanks.
What you see is, actually, an optical illusion generated by the contrast between white and red fonts. Also, you use bold fonts for links which only add to the impression that these fonts are smaller. Try changing their colors and weight.
I've uploaded a screenshot of a fragment of your page. That line can be used as a base to compare a little more accurately these fonts. Hope it helps.
EDIT. I use Firefox. Maybe in other browsers bold fonts are rendered a little different and the discrepancy is real (not an optical illusion as I've supposed the first time).
First off, I don't have a copy of Verdana bold. It's no where on my hd and I don't know the first thing about making fonts so that is out of the question.
I've been searching for a couple of hours now and it seems the tried and true solution is to embed multiple versions of the font off the stage.
Ridiculous. Right? In either case, I am pleading to all you Flash Jedi out there to please tell me there is another way? I refuse to turn to the dark side.
First of all, you don't have to buy it. Second, this is how it's done in Flex so it can give you some insight.
#font-face{
src:url('fonts/Verdana.ttf');
font-family:Verdana;/*any name you want actually, you can have it VerdanaBold*/
font-weight:bold;
}
To call it later from a component, let's say a Label
<s:Label text="Your text here" fontFamily="Verdana"/>
The long answer is that I can't believe you don't have Verdana on your system, how come? If you see it in Office software or even in notepad font settings but don't know how to get it, assuming it's a Windows system, look under Control Panel > Fonts.
If you're using the Flash IDE, embedding it outside the stage (anywhere - it just need to be on your project) is, indeed, the best way to do it. Basically, if you have a TextField with font embedding set, Flash only embeds the basic font, ignoring the rest - so if you want text with <b> somewhere in there, the bold font has to be embedded.
You probably do have Verdana bold in your system, maybe you just can't see it (depends on your system). Just try creating a Verdana TextField and enabling bold.
You can also have it added to the library as a font asset, but it has problems of its own. Feature wise, the hidden textfield trick works best.
You can also embed fonts with the [embed] meta tag, but that's a bigger can of worms for you if you're working with the IDE (since it means to start using the Flex SDK from it).
You can go to the library panel and from the top right corner (click the little triangle and grid looking thingy) and choose "New Font". There you can embed bold Verdana and use it in your code.
What is your normal method on styling print style sheets when it comes to font faces.
Traditionally serif fonts are better for printed media, but if the sans serif font is still clear and legible, would it be a better option for a print style sheet, if it made the print outs match the website more.
I usually use the same font as on the website. The only things I change are the font-color and background-color for light text on dark background. Using the same fonts the print out look more like your actual page and the line breaks will usually stay at the same position.
If you have a website like a blog or any page that has it's main focus on text, there is not argument against using serif fonts for the print out.
It depends on what you want the print out too look like.
If youre trying to make it look exactly like the screen version, then obviously you don't want to change anything.
If youre trying to make the printout as legible as possible without retaining the same look and feel as the screen, then it is a good idea to replace the fonts, adjust the colours, line and letter spacing, sizes etc.