I'm working on a web app where I need to display a service mark character (℠). The stylesheet has a font-weight of 300 for the tag where the character is rendered. When rendered at this weight, the service mark character seems to become abnormally large and slightly thicker than one would expect given the appearance of the trademark character (™) at the same weight. The behavior is more pronounced when a font-weight of 100 or 200 is used.
Below is a test document which demonstrates the behavior. The output on Firefox 12.0 on OS X looks like this (sorry, too new to attach image inline). This behavior seems to persist regardless of font-family used. Chrome 19.0.1084.52 on OS X also displays the service- and trademarks with some inconsistency across weights, but the effect is much less noticeable.
Is this a bug with Firefox/Gecko, or am I doing something wrong here? Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Service Mark Test</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-type' />
</head>
<body style="font-family:sans-serif;">
<p style="font-weight:normal;">Here is a normal service mark℠ and trademark™</p>
<p style="font-weight:100;">Here is a weight 100 service mark℠ and trademark™ <span style="color:red;">(unexpected)</span></p>
<p style="font-weight:200;">Here is a weight 200 service mark℠ and trademark™ <span style="color:red;">(unexpected)</span></p>
<p style="font-weight:300;">Here is a weight 300 service mark℠ and trademark™ <span style="color:red;">(unexpected)</span></p>
<p style="font-weight:400;">Here is a weight 400 service mark℠ and trademark™</p>
<p style="font-weight:500;">Here is a weight 500 service mark℠ and trademark™</p>
<p style="font-weight:600;">Here is a weight 600 service mark℠ and trademark™</p>
</body>
</html>
Change the font family setting to e.g.
font-family: Calibri, Arial Unicode MS, Lucida Sans Unicode,
DejaVu Sans, FreeSans, sans-serif;
This is a font problem: when you use just the generic name sans-serif, each browser will use its own default sans serif font. This is typically Arial, which does not contain the service mark character. Browsers will be forced to use fallback fonts, and Firefox apparently uses different fallback fonts for different font weights—this is a bit strange, but surely possible.
The list above contains specific fonts that contain the service mark character. Most of those fonts have just one or two font weights, as most fonts, really. Even the bold version of e.g. Arial Unicode MS is “fake bold” (algorithmically bolded normal font), but the result is usually tolerable, though not pretty.
I found this which may help answer your question.
http://www.htmlcodetutorial.com/character_famsupp_197.html
As you see font-weight: 100 is pushing the font as thin as it can go, while 400 is normal, 700 is bold.
In between can make very little difference and in most cases 100 - 500 are exactly the same to the majority of font families.
Related
i have problem with font-weight, for "EN" languages it is working fine, but when I do the same thing with with my lang (SK) some characters have different font weight. Font is 'Open Sans'. When I try these chars in font.google viewer there is no problem. Actual font-weight is 300, on 400 there is no problem but I want it to be thin. The problem occurs on some Chrome(Mobile),Edge, IE. Any ideas?
Open Sans on fonts.google
Open Sans on my website
link to page: thomaskovo.github.io/hotel-it/IT_Bussiness_Solutions/hosted_exchange_office_365.html
body{
font-family: 'Open Sans', sans-serif;
font-weight:300;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
This is a testing text.
Mačka žena ťava šošovica
<hr>
Open this in Edge or IE
</body>
</html>
The font used doesn't contain all glyphs. Due to font fallback, the missing glyphs fall back to some other font.
You only load the Latin glyphs. You also need to load subsets that contain the needed glyphs:
<link href="https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext" rel="stylesheet">
Note: subset=latin-ext.
I took this snippet form fonts.google.com on the embed AND customize tabs (bottom right).
I'm currently writing a web page in HTML5, trying to obtain Avenir Black as a font for a block of text. However, it seems that each time that I define it as the font family, it doesn't work, and displays the default font instead. Now I don't really want to modify the CSS file since it's only for one block of text... What's the problem?
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-family : Avenir Black ; font-size : 54pt"> SAMPLE </p>
</body>
</html>
Displays http://imgur.com/QlUaXTd.
Font-family names with spaces need apostrophes as Evan Mosseri has said, so:
<p style="font-family : 'Avenir Black' ; font-size : 54pt"> SAMPLE </p>
However, the font must also be installed on the computer running the browser, which doesn't seem likely for browsers in general, even if it is installed on your computer.
You can 1) give up and use something like Arial Black, or 2) use an image, or 3) find and purchase a downloadable Avenir Black font. For the latter, try a search for "Avenir Black WOFF." Type as images is a Bad Idea™ and best left alone for a number of reasons, not the least of which is accessibility.
It would not have provided a complete solution this time, but whenever CSS doesn't work, the CSS Validator is your friend: http://jigsaw.w3.org/css-validator/
Edited to add: You should always use an alternative list in font-family, ending with one of the generic font names. So, in your case:
font-family: 'Avenir Black', 'Arial Black', sans-serif;
That way, if Avenir Black is installed on the computer running the browser, it will be used. If not, Arial Black will be used. If neither is available, you will get some sans-serif font instead of the default font.
A Google search for "fonts similar to Avenir Black" turns up the Google font Nunito: http://www.google.com/fonts/specimen/Nunito It's free, or you can get the real Avenir Black for $30.
Try font-family:"Avenir Black" but you may need a font face declaration
I'm doing a Photoshop-to-XHTML conversion, and the website designer used the Myriad Pro Semi-bold font which looks good in the photoshop file, but when I try the semi-bold option in CSS, it looks pretty much like a normal bold font, which is too bold for my purpose. Is there a way to achieve a nicer looking semi-bold font in HTML and CSS or am I just stuck with 'font-weight: 600;'?
In CSS, for the font-weight property, the value: normal defaults to the numeric value 400, and bold to 700.
If you want to specify other weights, you need to give the number value. That number value needs to be supported for the font family that you are using.
For example you would define semi-bold like this:
font-weight: 600;
Here an JSFiddle using 'Open Sans' font family, loaded with the above weights.
The practical way is setting font-family to a value that is the specific name of the semibold version, such as
font-family: "Myriad pro Semibold"
if that’s the name. (Personally I use my own font listing tool, which runs on Internet Explorer only to see the fonts in my system by names as usable in CSS.)
In this approach, font-weight is not needed (and probably better not set).
Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work.
Testing with Segoe UI, which often exists in different font weight versions on Windows systems, I was able to make Internet Explorer 9 select the proper version when using the logical approach (of using the font family name Segoe UI and different font-weight values), but it failed on Firefox 9 and Chrome 16 (only normal and bold work). On all of these browsers, for example, setting font-family: Segoe UI Light works OK.
For me the following works good. Just add it. You can edit it as per your requirement. This is just a nice trick I use.
text-shadow : 0 0 0 #your-font-color;
font-family: 'Open Sans'; font-weight: 600; important to change to a different font-family
By mid-2016 the Chromium engine (v53) supports just 3 emphasis styles:
Plain text, bold, and super-bold...
<div style="font:normal 400 14px Arial;">Testing</div>
<div style="font:normal 700 14px Arial;">Testing</div>
<div style="font:normal 800 14px Arial;">Testing</div>
Select fonts by specifying the weights you need on load
Font-families consist of several distinct fonts
For example, extra-bold will make the font look quite different in say, Photoshop, because you're selecting a different font. The same applies to italic font, which can look very different indeed. Setting font-weight:800 or font-style:italic may result in just a best effort of the web browser to fatten or slant the normal font in the family.
Even though you're loading a font-family, you must specify the weights and styles you need for some web browsers to let you select a different font in the family with font-weight and font-style.
Example
This example specifies the light, normal, normal italic, bold, and extra-bold fonts in the font family Open Sans:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
<style>
body {
font-family: 'Open Sans', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div style="font-weight:400">Didn't work with all the fonts</div>
<div style="font-weight:600">Didn't work with all the fonts</div>
<div style="font-weight:800">Didn't work with all the fonts</div>
</body>
</html>
Reference
(Quora warning, please remove if not allowed.)
https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts
Testing
Tested working in Firefox 66.0.3 on Mac and Firefox 36.0.1 in Windows.
Non-Google fonts
Other fonts must be uploaded to the server, style and weight specified by their individual names.
System fonts
Assume nothing, font-wise, about what device is visiting your website or what fonts are installed on its OS.
(You may use the fall-backs of serif and sans-serif, but you will get the font mapped to these by the individual web browser version used, within the fonts available in the OS version it's running under, and not what you designed.)
Testing should be done with the font temporarily uninstalled from your system, to be sure that your design is in effect.
I've been doing front end development for a long time, and I have NEVER come across a bug like this before...
Save the following HTML to a file and view it in Firefox (mine is 3.6.3):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body { font-family: Helvetica, Sans-Serif;}
h2 {font-weight: normal;}
</style>
</head>
<body>
<h2>Some normal text <strong>some bold text</strong> weird huh?</h2>
</body>
</html>
If you don't want to give it a shot the output is like your cat walked across your keyboard while character map was turned on, except in the strong tags.
I feel like this may be a font issue? When I get rid of font-weight: normal it goes back to normal, but I don't want everything to be bolded in my h2... Anyone have any ideas? More importantly, is anyone able to reproduce this??
Thanks.
EDIT
Here's a screenshot. It works fine in all other browsers, and all text that has not previously been set as bold (normal text) renders fine.
This seems to be something Helvetica specific. Here is a number of reports with screenshots that look exactly like your case.
Mozilla Bug #444203 - Helvetica font rendering garbled/garbage on some web sites
Mozilla Forum - Firefox 3 displays garbage characters
They mention workarounds. On server side:
if the CSS definition defines the font family using font: instead of
font-family:, this bug does not occur.
when setting the font-family by way of font-family: (instead of by font:),
the error only occurs once you're showing fonts over 20pixels in size. It
doesn't matter if the font size is set by way of em or px, but once the actual
display size is over 20px, it gets garbled.
On the client side, it seems to be recommended to remove or re-install the Helvetica font. Can you check your fonts folder for any HELVETIC.TTF or similar files?
Have you checked your encoding?
When you remove Helvetica or Sans-Serif and replace them with other fonts, do you have the same problem? For example, have you tried using another fonts and then combinations of Helvetica and Sans-Serif with those:
Courier, Helvetica
Courier, Sans-Serif
This is may be due to a strange version of Helvetica loaded on your machine. Try disabling that font locally and see what happens.
Looks like this is something to do with the encoding (and not font).
Check your encoding as it is decided by firefox: View -> Character Encoding.
Is it UTF-8?
Does changing it to anything else (say Western (ISO8859-1)) change the characters?
Can you try disabling your addons, especially the theme and check (start firefox in safe mode)? Perhaps some add on is meddling with the encodings...
In CSS, I usually go with the usual
font-family: Arial, Helvetica, sans-serif;
For a little change, I'm going for a font that looks like handwriting. Can some of the expert CSS folks here suggest what would be some of the safest fonts (most widely available in most browsers) that look like handwriting?
Similar to sans-serif there is a generic cursive that it a "font that resembles handwriting". This will vary by browser (as will sans-serif) but could be a good place to start.
Here is a survey of script family fonts installed per user (year 2012):
Cursive font sampler and survey results
They all look significantly different from each other so you'd lose some consistency, but some are quite widely adopted.
Their main installed fonts are (FOR WINDOWS ONLY):
Comic Sans MS 99.13%
Monotype Corsiva 82.29%
Bradley Hand ITC 63.02%
Tempus Sans ITC 62.68%
French Script MT 62.39%
You could use one of the Google web safe fonts: http://www.google.com/webfonts/family?family=Schoolbell&subset=latin#code
<link href="https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">
h1 {
font-family: 'Schoolbell', arial, serif;
}
There is no handwriting font that would be reliably available in most browsers across all platforms. There are subsets like the fonts that come with Windows Vista or 7 but if you want to achieve any serious reliable coverage, it's likely that you'll have to resort to delivering the font alongside the web page - which, sadly, makes things complicated.
Related SO questions:
How to add some non standard font to website?
How to use our custom font on our website
Fonts on the Web
I suppose Comic Sans or Lucida handwriting would be some of the most widely available 'handwriting' fonts, although they're not great fonts. You might be better served by looking into some of the font embeding options, either using fancy-smancy html 5 stuff: http://www.broken-links.com/2009/05/28/exciting-times-html-5-web-fonts/ which won't be entirely supported, or using sIFR which is flash based: http://www.mikeindustries.com/blog/sifr, or some combination of these solutions to reach all users.
Comic Sans would be the most handwritingesque font common to macs and pcs, that being said you could always embed a font in your page.
Read This: http://www.w3.org/Style/Examples/007/fonts
and for a non js way: http://css-tricks.com/css-image-replacement/
The only web-safe handwriting font is Comic Sans - if you want to inflict that on your users. ;)
For percentages, see the results of the Code Style survey as of this month:
Windows 99.13%
Mac 89.94%
Linux 60.95%
The most common cursive one on Linux is URW Chancery L, but it's not cross-platform.
There's an alternative.
If you're familiar with Javscript or Jquery.
There's a very nice script called "Cufon" that does a thing called "Font Replacement".
With this simple to use script, you can use ANY font you want on your website.
I suggest you start by checking it's documentation, then create the cufon-js version of the font and then use it !
With code like this, you would be already doing font replacement ...check this simplicity
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>This text will be shown in Vegur.</h1>
</body>
</html>
Please visit this website for more information:
http://cufon.shoqolate.com/generate/ (this is were you can generate your favorite font and make it ready to be used as a replacement on your site).
Remember to include the jquery file!