I am trying to solve an issue with Google WebFonts. I want to use font Signika from them. As you can see it has letters such as Š, Ů declared/implemented. On our website, however, it does not render these letters but just standard and in word DOMŮ - letter Ů is in another font and in word DALŠI letter Š in another font. Is there any solution for this? Should I declare some encoding for these types of letters, or where could the problem be?
When i look at your website, i see both the words (and individual letters) you list as problematic in the font Signika.
I do notice however, that you are only calling for the Standard font set, and not the Laten-Extended Subset. On this page you may want to check the box Latin Extended (latin-ext) and update your code if other browsers are experiencing problems.
If characters are implemented in the font file but your site can not display it you need to check if you are calling right subsets:
For example, to request the latin and latin-endended subsets of Oswald, the URL would be:
http://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext
For more information:
https://developers.google.com/fonts/docs/getting_started#Subsets
Hope it helps.
Related
I'm currently working in a website where some words contains č, ď, ň, ř, š, ž.
Unfortunately the special letters are displayed bigger than the normal letters.
Here an example:
I use a .properties file where I include the text like this:
Any ideas? I have another website with the same content but different cms and there it works well. CSS and font is the same for both sites.
Any suggestions?
Find a webfont containing all required characters.
Of course this may be nearly impossible if you're expecting historians to enter linear-b, hieroglyphs and other ancient and/or modern characters .. AFAIK there is no font covering all of UTF-8.
As already said, probably the used font doesn't contain that character, so the browser uses another font only for that letter, which can be different in actual size.
To avoid that, you should find a font that contains all the letters you need. I usually go to Googlefonts for that (https://fonts.google.com/) and there, at the top center, in the input field that is labeled "sentence" by default, type all the special characters needed (like č ď ň ř š ž ü ä ß © etc.). This will display these characters with all the fonts listed. That way you can see if a font contains those (and how they look) or shows "?" or similar instead.
You might find the CSS Unicode range facility useful.
If you have a font which has gaps, or in which you don’t like a certain character it is giving you, then you can change it for a character from a different font.
See for example https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/unicode-range
The unicode-range CSS descriptor sets the specific range of characters
to be used from a font defined by #font-face and made available for
use on the current page. If the page doesn't use any character in this
range, the font is not downloaded; if it uses at least one, the whole
font is downloaded.
i want to design my own video player. I want to add this special character as a "volume"-button: 🔉 http://www.fileformat.info/info/unicode/char/1f509/index.htm. But it always shows a weird rectangle with the number 01F509.
Whats wrong ?
greetings
When you see a weird rectangle with the number 01F509, it means that the browser has correctly recognized the character but cannot display it due to lack of glyph for it. Either the system has no font containing a glyph for the character, or the character is unable to use such a font, due to a browser bug. For generalities, see my Guide to using special characters in HTML.
The Fileformat.info page cited has a link to a list of fonts that support the character. The list is short: Quivira, Segoe UI Emoji, Segoe UI Symbol, Symbola. (LastResort is not a real font.)
Segoe UI fonts are proprietary and available only in relatively new versions of Windows. Besides, there fonts exist in several version, and this character seems to be a rather recent addition.
This means that you wold need to use Quivira or Symbola as a web font (downloadable font). If you choose to do that, use e.g. http://www.fontsquirrel.com/ to generate the font files and the CSS code for using them. Note that both Quivira and Symbola rather large fonts, so using them just to get one glyph is a bit disproportionate.
At this point, it is rather obvious that some other approach is most probably better, e.g. using an image in sufficient size and reducing it according to font size by setting its height in em units.
To avoid encoding issues, try including the character in your HTML code using the hexadecimal entity notation: 🔉 then make sure that the font you are using contains this character, else you'll see a rectangle in place of the character.
You may create your own font with the desired character using tools such as http://icomoon.io
Also note that some browsers have issues displaying characters outside of the range 0000 to FFFF (plane 0 of the Basic Multilingual Plane (BMP)). I have experienced the issue with Safari on Windows and IE <= 8. So try avoiding this range if you want to support all browsers.
I want to take characters in the Microsoft Symbol font (taken from the w:sym tag in a docx file) and render them in html. When I look at how Word writes out the characters when I save the doc as html, I see this:
<span style='mso-char-type:symbol;mso-symbol-font-family:Symbol'>Â</span>
This appears as a script R in both Word and Word's html output.
When I write the same thing in my own html file, I see the A-hat in the regular font, and Chrome's element inspector warns that the mso- properties are unknown.
In Word's html output there is lots of mso-specific stuff but nothing I can see that lets Chrome know how to interpret mso-char-type and mso-symbol-font. I see the same behavior in IE.
Is there an easy way to tell the browser to use the Symbol font? Or do I have to explicitly translate the Symbol font characters to Unicode (using a static translation table?)
Thanks,
Wayne
The Symbol font is a privately-encoded font, i.e. it places various glyphs in positions that should be occupied by other characters according to character code standards. This means that a web page using it will fail badly whenever the Symbol font is not available, or the page style sheet is overriden, or the browser behaves correctly: e.g., the letter “” cannot be rendered using the Symbol font, so the browser will use a fallback font.
The proper way is to use Unicode encoded characters, such as “ℜ”, in a UTF-8 encoded page, with font-family on the applicable element set to contain a list of fonts that contain this character. For general notes on this, see my Guide to using special characters in HTML.
An inappropriate way that has worked on some faulty browsers is to set font to Symbol in a manner generally understood by browsers, e.g. <font face=Symbol>Â</font> or <span style="font-family: Symbol">Â</span>. But as said, if this “works”, consider it a browser bug.
So yes, if you now have data using Symbol font, it should be mapped to Unicode characters.
Note that characters like “ℜ” (Black-letter capital R, not script R) are seldom needed. In particular, the standard (as per ISO 80000-2) notation for the real part of a complex number z is not ℜ(z) but Re z.
Ok, just removing mso-symbol and writing font-family:Symbol seems to have worked. However I suspect this is not really best practice... A table for translating symbols into unicode can be found here: http://www.alanwood.net/demos/symbol.html
I have a bunch of HTML documents that contain some simple text in Windows-1252 encoding, but throughout the text there are numerous appearances of span elements with font-family: Symbol.
For example:
<span style='font-family:Symbol'>Ñ</span>
Which appears as the greek delta - Δ in the browser.
Google told me that using the Symbol font might show different results on different systems, as it's not actually a well defined font.
Is this really true? Is it "unsafe" to use the Symbol font?
If so, is there any way to reliably convert (on my own system) such symbols in the Symbol font to their Windows-1252 counterparts?
It's been always unsafe to rely on having certain font installed on all the computers/smartphones/gadgets that visit your site. There're some font embedding techniques that work reasonably well in some modern browsers but you'd need to repack the Symbol font and I doubt the copyright owner allows you to do it.
Of course, most characters in the Symbol font are not in the Windows-1252 encoding but that should not be an issue. You can use the following map to obtain the appropriate HTML entities. However, you'll have to write a script or program using a programming language (HTML is just a markup language).
When using font-family, if neither of the listed font faces are found on the client, that is without the webfont embeds, may result in changing to default font of client hence a different font replacement for what you'd show to your users.
You may want to use UTF-8 encoding and put the delta (Δ) sign in your HTML content, or use webfont embeds to provide an option, "use the font I want from this".
The problem is that the greek letter you see is just the appearance, the actual letter is something completely different.
I can think of two ways to convert it:
1. Write a script (in your language of choice) that converts each letter to it's Greek counterpart. (Ñ => Δ)
2. Take a screenshot of the document/page and use an OCR-program to convert it to Greek text.
I am developing webpage with contains some cyrillic text with stress marks. To place stress mark I use utf8 character U0301 (COMBINING ACUTE ACCENT). In every editor I have already used and every cyrillic-related webpage I have already seen this stress mark is displayed above letter which is placed before this character in the text. My problem is that on my page this character is displayed above letter which is placed after this mark in text. What is more this incorrect behaviour can be observed only on cyrillic words. With usual latin words it is displayed correctly.
I set every encoding-related headers.
[EDIT]
This issue seems to be present on Firefox only (I use version 13.0.1). When I use Chrome then accent marks are displayed correctly.
Select a suitable list of fonts, to be used in the font-family rule for the texts, based on experimenting with different fonts, preferably on different platforms and perhaps on different browsers, too. You can test fonts in your favorite word processor (or editor) using different font settings; the result is not necessarily the same as in web browsers, but usually similar. E.g., Calibri and Arial look OK, and so does Cambria on the serif side (Times New Roman does not have a problem with U+0301, but it does not render well in general unless the resolution is fairly high).
Also consider using some suitable font as web font (via #font face).
This sounds messy, but it’s really the practical way. The problem is threefold:
In some fonts, U+0301 is just all wrong, or a little wrong. E.g., in Georgia (a generally OK font), U+0301 appears on the right of the base character, as if it were not a combining mark at all but a separate symbol. In Courier New, it’s placed over the next character. In Constantia and FreeSerif, it’s placed too right, though still recognizable as a diacritic mark.
Some fonts lack U+0301 completely, forcing browsers to take it from a font other than that of the base letter. Needless to say, this may cause a mess (or you might get away with it, if it just happens to fit in).
Browsers and other programs differ in their handling of combining marks. There’s not much you can do about it. Older browsers may easily produce poor results even for fonts that have U+0301 well implemented. The reason is that placing a diacritic mark properly is a complex operator: the program needs to access information about the base character, in order to place e.g. the acute differently on lower-case о than on upper-case О.
I can’t tell why you get different results on Firefox than on Chrome, unless you have left fonts to their defaults and the browsers use different defaults.
The reason why (many) combinations of U+0301 with Latin letters work well when U+0301 with Cyrillic letters fails is probably the completely different treatment. Browsers may, and often do, render a combination of a letter and a combining diacritic mark as a single glyph, corresponding to the so-called precomposed character. So if a browser sees ó, where o is the Latin letter, it internally maps this to the single character “ó” U+00F3, which is contained in most commonly used fonts.
As a typographic detail, when aiming at very good quality (which we often cannot afford...), Latin letters like a, e, o, y should look exactly the same as their Cyrillic counterparts (by shape) in the same text. The designs are identical in any decent font. But when accents are added, this may change, unfortunately. For example, in Calibri о́ (Cyrillic o with acute) has an accent different from that of ó (Latin o with acute). This is a design flaw in the font. (But in typical copy text sizes, the difference is barely noticeable.)
It could possible be to do with the default font that you have set on each browser, and/or the browsers own default styles? I've tried this JS fiddle — in Firefox with Times the accent is perfectly aligned, but with Arial it's decent, but a little to the right.
Chrome on the other-hand is passable with Arial, but Times is very shifted to the right.
Have you tried adjusted which font-family, line-height, font-size etc used to see if this will affect the issue?
EDIT: Additionally, just read this advice on Penn State University website:
Fonts like Times New Roman and Georgia contain Cyrillic characters in
Windows, but on a Macintosh, they may be only included in the "CY"
Cyrillic fonts from Apple like "Times CY".
.serifcyr {
font-family: "Times CY", "Times New Roman", serif
}
.noserifcyr {
font-family: "Geneva CY", "Helvetica CY", "Arial", sans-serif
}
I have used font Roboto from Google Fonts service and it had the same problem – accent placement was wrong.
To solve this I have downloaded this font (ttf version) to my computer, installed, opened photohosop and ensured that actually accents are correct! Then I uploaded font to fontsquirrel.com service and converted to my own web-font, and then accents was fixed! Except above cyrrilic «і» letter.. But, this is better than nothing.
Tip - if you have several font weights, then on fontsquirrel.com choose «expert...» and check «Style link» — it will compose css so that you will have one font name with different weights.