We are having a strange issue on three custom made WordPress websites. There are squares randomly visible in the text. These squares are only visible in Chrome for Windows. The squares are visible at https://www.dakcheck.nl. I also made a screenshot of the issue. Do you have any idea what could cause this problem?
You seem to be using characters that are not contained in latin subset. You need to specify the additional subset containing the characters you are using when loading the font. In your example, you need to replace
https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,900,900italic,500,400italic,500italic,300,300italic
...with:
https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,900,900italic,500,400italic,500italic,300,300italic&subset=latin,latin-ext
Note the &subset=latin,latin-ext suffix.
Important note: If the strange characters are not special letters pertaining to your language, the most probable cause is a difference in encoding between your saved files and the webpage. You need to make sure your IDE saves your (.php, .html, .css, .js, etc) files with the exact same encoding as the one declared in the <head> tag of your pages.
Best choice is, by far, UTF-8, but advise on what encoding you should use is out of scope here. The important thing is they have to match.
Additional note: I personally believe you should streamline the usage of fonts in your website and try to drastically limit the number of font weights and variants you are currently loading. You are currently loading 300, 400, 500, 700 and 900 weights in both normal and italic variants. You could probably do with only 400, 700 and 900 and some of them don't even need italic (if not used).
Also note you don't need to change font-weights in your current CSS to streamline font usage. If a font-weight is specified but not present, the browser will automatically use the closest match. For example, if you now have font-weight:500 on an element but only load 400 and 700 weights for the specified font, it will automatically use 400 instead of 500 on the element.
In web development, commonly used font-weights are:
thin (not valid value for font-weight property - define it inside a class definition) usually font-weight:200; - commonly used in conjunction with large font-sizes, to feature large and very thin (~1px) letters
normal (valid value for font-weight) usually translates to font-weight: 400;
bold (valid value for font-weight) usually translates to font-weight: 700;
extrabold (not valid value for font-weight - define it inside a class definition) usually font-weight:900; - commonly used for titles.
I think you will have to edit your content texts: what is present there are control characters, namely end of text control characters in places it is not supposed to be:
Ie navigating to https://www.dakcheck.nl/ and invoking
var t = document.getElementsByTagName('h1')[0].innerText;
t.charCodeAt(t.indexOf('met ')-1)
in the console yields 3.
It is probably caused by copy-pasting from some (desktop?) rich-text editor into WP, although I'd suppose WP editor should handle this.
I've been able to root out phantom characters like that using the HxD hexeditor. You'll see the regular text on the right, and the BinHex on the left. Whatever the phantom character is, use '20' to replace it, and you'll get a regular space without the box.
Related
I'm looking for a font which displays a or a * for every character, in the same way. A totally unreadable font.
Despite my efforts I couldn't find one on the internet. Is there a system font like this ? Or do you know one ?
As I doubt that such a font exists, an alternative could be to do your own select. Using the data-* attribute provided by HTML5, you can attach any additional information to any element. So, you can develop a select that would display the character you want (e.g. *) but set data-something to the correct value. Then, when the user press on a button or so, you can call a function to iterate through your personal selects and read the data-something from them to compute the data the user entered.
Here is a minimal example of such a code : https://jsfiddle.net/w0za8ut6/2/
Make one. Just fire up FontForge, the authoritative open source font editor of choice, and make a font with your desired glyph pasted into every letter box that you need supported, or you can craft a cmap 13 font with a single glyph but defined as used for the entire code range, like Adobe's "Blank" font.
Generate your font, pick "web open font" format to make it a WOFF2 instead of a system font like ttf/otf, and done. You can now load it with an #font-face rule.
That said, what you want to do sounds like a weird hack that doesn't actually make passwords any more or less secure, but that's your decision.
The font part at least is almost trivially easy.
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 have a page which contains some HTML-encoded Unicode characters: ▲ (▲), ▼ (▼), ◄ (◄), ► (►) and ✓ (✓). Some users complain about some of these not showing up in their browser.
What is the best way to solve this without installing fonts on the users' machines? Do I have to make bitmaps for each Unicode character? If yes, is there a tool to convert characters to bitmaps? Or is there a better way?
As this is primarily a font problem, the alternatives are to use a downloadable font, also known as web font, via #font-face, and to use images instead of characters. I wrote “primarily”, because there is an additional difficulty: some browsers will not display some characters unless they can be found in the fonts listed in the applicable font-family list. For generalities on these issues, see my Guide to using special characters in HTML.
In this special case, the character “✓” may cause problems since it is present in relatively few fonts. I would expect the others to be OK in most cases, but my expectation was wrong: Android (2.x) shows ▲ and ▼ OK, but not ◄ and ►.
Using a downloadable font to get such characters rendered might be overkill, so it might be best to use images. You can just write the character in some program using some suitable font in large size, take screen captures of each, and save them as images. Then you would use them via img tags, setting the heights of the images to suitable height in CSS, using the em unit. The reason is that this way they will look good in different font sizes – adapting to font size, and scaling downwards tends to produce better results than scaling upwards.
If you take this way, then it is best to represent all of ▲, ▼, ◄, ► as images, to make them stylistically matching.
Simply use UTF-8 for encoding of your pages and in case some fonts are missing those symbols use Arial, because it contains them all.
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 have a dynamic list of names which includes some superscript keywords like "®".
I don't want to use tag to superscript "TM" or "Registered" etc. Is there any font available which does this task without adding tag for default keywords?
Thanks.
Trademark symbol (TM) which you can get by using the HTML entity ™ appears like a superscript in chrome and firefox, by default.
For ® ("Registered" symbol - encircled R) I guess, it would be better to add <sup> tag. May be, you can run a script either on the client-side or on the server-side, to add the tags to such characters.
Many fonts contain the character “®” and especially “™” in a superscript-like appearance. It is more or less an inherent feature of these characters that they should be rendered that way. It follows that if you put them in a superscript, the result tends to be bad, especially since superscripting usually reduces font size and the size is already rather small for a poor little “R” tweaked inside a circle.
You may need to change the font of your text or, less radically, change the font for these characters. If the copy text font is a sans-serif font, consider using Lucida Sans Unicode for these characters. If serif, try Times New Roman.