I'm using the Roboto Family of fonts. In general, it fits perfectly to all my needs except one. The length difference between ndash and mdash is to small. It is a very important aspect, because as a part of our services - we are helping editors, proofreaders, writers and typeseters.
To fix the issue, we adjusted the font and we hosted it on our server. Unfortunatly, this has an significant impact on page loading and rendering speed (even the preloading the font is done).
I would like to switch into CDNJS version of the Roboto font and I'm wondering if there is a CSS or CSS+JS way to fix the issue. The idea is to select all the ndashes on the site and to shorten all of them with either JS or CSS, to be exactly in the middle of the length between dash and mdash. In the origin Roboto font ndash is twice so long as dash but mdash is just a little bit longer than ndash.
An alternative is, to replace all the ndashes with an ndash from another font.
Any other ideas?
You mention replacing the ndashes and mdashes from another font.
Have you considered using the CSS font-face unicode-range property?
If you have a font that has the sort of size dashes you want you could substitute those for the dashes in Roboto.
I couldn't immediately find a font that had sufficiently different dashes to the standard ones to demonstrate, but here's the code from MDN which substitutes the ampersand in Helvetica with the slightly more flamboyant one from Times New Roman. This method saves having to do anything to your actual text.
#font-face {
font-family: 'Ampersand';
src: local('Times New Roman');
unicode-range: U+26;/* 2013-2014 ndash and mdash */
}
div {
font-size: 4em;
font-family: Ampersand, Helvetica, sans-serif;
}
<div>Me & You = Us</div>
Related
I was developing a website on a iMac and the character 'Š' was rendering properly, then I got some feedback that I missed the 'ˇ' symbol. I double checked it and I had spelled it correctly.
Does anyone know any 'CSS hack' or something to get the character rendered right?
I've tried text-shadow, anti-aliased font rendering without success.
Both examples were made on Google Chrome and font was imported from typekit using:
http://use.edgefonts.net/raleway:n1,n2,n3,n4,n5,n6,n7:all.js
Here's the code incase imgur and jsfiddle decide to drop the links:
* {
font-family: 'Raleway', sans-serif;
font-weight: 300;
text-transform: uppercase;
font-size: 16px;
}
http://jsfiddle.net/aYFw2/
This appears to be a problem with the font, when some font rendering techniques are used. You can see similar problems with characters like Å and É. Depending on font size, the diacritic marks may be cut off in part (e.g. so that just a small dot appears) or completely. E.g., in size 24px the problem does not exist.
The conclusion is that if you wish to such small font sizes, or want your text to be legible in small sizes, you should use a different font.
I'm using a custom font and loading it through #font-face. The text looks fine, but the numbers look screwy (only on chrome-windows, which is a very well know bug. And yes, I tried using the svg format for chrome, which solved the numbers but screwed the text). I decided to limit my own font to only [a-z][A-Z], and using this generator got this:
unicode-range: U+0041-U+005a, U+0061-U+007a;
And it seems to... not be working. Numbers are still being displayed using the font. How do I find the right range to use\some other solution? I'd love for a general solution, for example if I want to limit future fonts as well.
Thanks in advance!
P.s.
While I'm on the subject - I'm assuming there's no way to load the same font twice - using the .svg file for numbers and .otf for text, right? Because if possible that'd be awesome as well.
You can use #font-face rules to specify that a font family name (which is up to you to decide) is mapped to a specific font except for some character range, for which another font is used. This even works for local fonts, e.g. as follows:
<style>
#font-face {
font-family: foo;
src: local("Times New Roman");
}
#font-face {
font-family: foo;
src: local("Arial");
unicode-range: U+0030-0039;
}
p { font-family: foo }
</style>
<p>hello 123</p>
On supporting browsers, “hello” appears in Times New Roman (if available) but “123” in Arial (if available); the range U+0030-0039 is the common European digits 0 to 9.
You can use similar techniques for downloadable fonts.
The bad news is that unicode-range is not supported by Firefox or by IE 8 or earlier. They fail differently: for the code above, IE 8 uses Times New Roman, ignoring the latter #font-face rule, whereas current Firefox uses Arial, as if the unicode-range restriction were not there.
Finally, I used a "brute-force" method. Using Font Squirrel's webfont generator I recreated my font files, and using the advanced options > custom subsetting, I completely removed the numbers from the font.
Seems like a terrible solution, but the best I could find.
I have a lot of css class where I redefine font sizes, example:
.ko {font-size:2.2em;}
.szik {font-size:2.8em}
Now I replace my default font with a custom one, I define a new one:
#font-face {
font-family: BebasNeue;
src: url("http://acc-road.com/page/media/BebasNeue.otf") format("opentype");
}
My problem is that the font size of the old one does not match with the new one, and my last chance to rewrite my all code. Can I solve this problem easily? How?
I try this solution, but it's not working.
#font-face {
font-family: BebasNeue;
src: url("http://acc-road.com/page/media/BebasNeue.otf") format("opentype");
font-size: 10.5em;
font-size-adjust: 10.5;
}
Thanks for the answers.
The font size is not changed at all when you change font family, but the dimensions of characters will change. If this is a problem, you need to reconsider your choices of font families and font sizes.
You’re not describing how you use fonts, so I’ll make a guess. Suppose your copy text font is Arial and you are using Bebas Neue for headings. In Bebas Neue, all letters are about as tall as uppercase letters in Arial. It’s an odd font that intentionally loses case distinctions, and this has its implications. (For example, if you used a huge relative font size like 2.8em, the sizes of letters will become even more huge, when in BebasNeue versus copy text Arial.) If you use it, you simply need to select font sizes accordingly. This should not be a big issue if you have set heading font sizes in a controlled manner.
In principle, you could use font-size-adjust to tune font sizes according to font family, but it works on relative x-heights (10.5 would be an absurd value), and it is only supported by Firefox, in a broken manner.
You don't need to rewrite all the font sizes, just change the font-size for the body tag:
body {
font-size: 15px; /* use an appropriate value */
}
When you say "1.2em" in a css rule, you're just saying that you want to use the inherited font size * 1.2. Is the same as using percentages.
I was wondering if it's possible to, when using #font-face, have a fallback setup so that if the text on my page contains characters that are not accounted for within the font (Japanese characters for example), only those characters are presented in a basic font and every other character remains as the custom font?
I'm imagining that potentially there'd be a mix of two fonts within one paragraph on occasion.
What you described is the default behaviour of a browser - it should naturally fall back to basic font for missing characters.
However, sometimes custom fonts use blank characters, in that case you can try using the unicode-range
For example:
#font-face {
font-family: BBCBengali;
src: url(fonts/BBCBengali.ttf) format("opentype");
unicode-range: U+00-FF;
}
Taken from this interesting article: Creating Custom Font Stacks with Unicode-Range
Unfortunatelly there are browser support issues.
CSS has default fallback to the system font if the specified font doesn't contain a character.
You can also specify which font to fall back to.
Example for a serif font:
body {
font-family: "MyNiceFontWithoutJapanesChars", "common serif font", serif;
}
As long as the fallback font has those characters your default font misses, you should be all right.
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.