It seems that Google is now serving Open Sans Regular 400 as italic. Anyone else experiencing the same issue?
Preview tools from various websites suggest the same. This screenshot is from http://typecast.com/preview/google/Open%20Sans
I found the reason for the issue:
I had installed some of Google's Open Sans font styles (Bold, Bold Italic, Italic, etc), but not Regular 400, using the service called SkyFonts.
When any website offered to serve a webfont-version of Open Sans, Chrome obviously resolved to using the system font Open Sans, falling back to 400 italic, which was the closest to 400 Regular, rather than downloading the webfonts.
Internet Explorer was not handling the issue the same way, and managed thus to present the webfont instead of using the closest matched system font.
Solution
The solution was one of the following:
Remove all locally installed Open Sans font variations
Install the missing 400 regular font variation in addition to those already there
Related
My website needs to allow users to key-in Myanmar font.
I am looking around and there is no proper documentation how to setup at webpage.
A few font providers are found like thanlwin, MyMyanmar Language ,etc. But there is no proper documentation how to setup their libraries.
I saw a few Myanmar unicode fonts, don't know which one to choose.
May I have some guide how to install lib at my server to support Myanmar font at my webpage?
Wikipedia uses the fallback sans serif (Helvetica / Arial) of your operating system for displaying Myanmar.
if you would prefer a specific font you can convert it the common font files (of course with the permission of the font designer):
https://www.fontsquirrel.com/tools/webfont-generator
Now you can upload it to your server and include it via #font-face (you’ll receive an example css file).
It's common knowledge that Outlook uses Word to render emails. It's also fairly widely known in the HTML email community that Outlook will render a custom font as Times New Roman.
Currently, I hide my font statement from Outlook using conditional statements, and then set Arial as the font. But it occurs to me that Word can use custom fonts, so does anyone know why Outlook can't? And does that mean it can but we haven't worked it out yet?
Microsoft Word and Outlook can display any font that's installed on a system, but Outlook cannot display a remotely referenced font. Outlook can display any font, custom or not, as long as it's installed in a user's local system. But it cannot display a non-system font that's referenced on a remote server.
Let's use Open Sans as an example. Open Sans doesn't come pre-installed on most computers, but it is freely available to download and install from Google Fonts. If you send an email with Open Sans in the font stack and someone with that font installed on their system opens it in Outlook, Outlook will display Open Sans.
However Outlook is not able to display remote fonts. So if a user above does not have Open Sans on their system, Outlook is not able to reference a copy of the font on a remote server to display it.
<!-- Outlook doesn't support this -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Not only does Outlook not support remote fonts, but it chokes on the reference above and display Times New Roman instead (as you mention). This can be fixed by placing the font reference inside a tag that Outlook ignores, like so:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--<![endif]-->
I hope this helps explain how fonts work in Outlook!
on my proxified site fonts from typekit.com are not imported.
I have this error message in console which seams to be related:
GET http://use.typekit.com/k/yvr5ozi-d.css?3bb2a6e53c9684ffdc9a98f41f5b2a623701…fad90e3287aa7c9eed409223e66627acbb9dbdff991d65ad30b7f969e63cd8681f2fa2879f 403 (Forbidden)
What should I do to make fonts embed correctly?
Nebojsa,
Your getting a 404 because the Typekit servers are rejecting your domain.
Meaning, every font belongs to a kit in TypeKit, in that kit you need to specify which domains these fonts are served under. If the particular site your working with is not listed here, it will not work and give you a 404.
http://help.typekit.com/customer/portal/articles/6857-using-typekit-while-developing-locally
In your case, if your site is catswithclounhats.com and if your serving the font under the virtualized site catswithclounhats.com.moovapp.com then the top level domain (moovapp.com) needs to be included in your kit.
good luck.
When I try going to that link, I get a forbidden error as well. You probably only have access to it because you might be logged in or have some kind of session going.
I recommend downloading the font file and then placing it in your assets directory in your project. You could even make a new sub-directory called assets/fonts.
Then you can use sass to include that font in your pages:
How to add some non-standard font to a website?
I'm trying to figure out why characters like this : 👉 show up like empty boxes. They are unicode characters though and charset is utf-8.
Can it be a font problem which doesn't have a glyph for that? Any ideas?
Details: Html page, i use firefox 16.0.1, Windows 7.. Page like on this post i dont see this glyph either
Thanks
The character which you've there is the Unicode Character 'WHITE RIGHT POINTING BACKHAND INDEX' (U+1F449). On that page, you can find a list of known fonts supporting the character behind the link Fonts that support U+1F449.
Font
LastResort
Segoe UI Emoji
Segoe UI Symbol
Symbola
Neither of those fonts is been used here on stackoverflow.com, so you'll also see an empty box.
If this occurs on your own website, and you'd like to fix it, then you'd need to supply a supporting font along with the webapp by CSS #font-face, or in this particular case perhaps better, look for a CSS based icon library such as Font Awesome. The <i class="fa fa-hand-o-right"> comes very close with this character.
The character U+1F449 was added to Unicode in version 6 in 2010, and it generally takes about ten years from the adoption of a character into Unicode before it is widely supported in fonts.
The few fonts that contain it now include Symbola and Segoe UI Symbol. If you have either of them installed, you’ll probably see it; otherwise not. Segoe UI Symbol is shipped with Windows 8 and apparently with (at least some variants of) Windows 7, though the Windows 7 version may be limited – an update is available from Microsoft. Symbola is a free font, so you could in principle use it as a downloadable font (via #font-face), but its file size is rather large.
Web browsers are supposed to use fallback fonts, if the fonts specified for an element do not contain a glyph for some character in the content. Firefox generally implements this will, IE does not, especially in older versions, so if you use the character on a web page, it is best to wrap in an element of its own (usually span is used for the purpose) and set the following on it in CSS:
font-family: Segoe UI Symbol, Symbola;
But this will as such (without #font-face) work only for people using computers that contain one of the fonts.
Missing font characters will usually be substituted with other fonts, and UTF-8 should be able to display all unicode characters. I suspect that the encoding of your file (how it is saved by your editor), does not match the declaration in the meta tags of your HTML page.
You can check your page with this W3-checker, it can possibly give you hints about the problem of your page.
EDIT:
You are right, it's not an encoding problem, the number of the character has such a high number, that the "normal" fonts do not support it. Maybe you can use one of those ☛ ☞, otherwise you would have to use a web font, and fonts with full unicode support can be quite large.
I was messing around with #font-face and I had some weird results. I downloaded and installed the font and it got installed in /Users/myuser/Library/Fonts like it should (I suppose!?). The weird thing is that it was working whatever URL I gave it in CSS.
Now I have removed the #font-face class from the CSS altogether, emptied all possible caches, even disabled & removed the 'Garton' font from Font Book (Mac thingie), but it’s still working! (I’m developing and viewing the page in Eclipse.)
So...
1: how can it work? The only way to make it fail is when I edit the font-family 'Garton' in CSS. Whatever I write in #font-face it works and I have no duplicates in CSS! I restarted the computer, put it up in my PC where it fails. I looked in /Library/Fonts where default fonts are installed I suppose, and there is no 'Garton' there.
Works even without #font-face in css
#header{
font-family: 'Garton',Georgia, serif;
}
Only way to make it fail on mac
#header{
font-family: 'GartonXXX',Georgia, serif;
}
2: If ever get clarity in this, I guess I must install the font it on the webserver that’s hosting the page? Or is there another way?
3: Why do my downloaded fonts get installed in different folder than the default fonts? (Not so important, but I’m very confused.)
If you’ve removed Garton from your Mac, it is odd that your web page still renders in Garton even without #font-face code. I can only imagine that Garton is still installed on your Mac.
Questions regarding that are better asked at apple.stackexchange.com or superuser.com.
If you’re working with #font-face, it’s better not to install the font on your development machine, so that you see what normal users see.
Yes — to use Garton on a public web site (where people without Garton installed on their machines will view the site), you need to have the font file available on the site’s server, or via a font service like Typekit or FontSpring.
You don’t need to actually “install” the font on the web server, you just need to serve the font file from there, just like you were serving an image file or a stylesheet, so that the browser can get it and use it on your web page.
In order to get it to work across browsers, you need to have the font file in a few different formats, and be careful with your #font-face CSS to avoid tripping up Internet Explorer. The easiest way to get this right is to use Font Squirrel’s #font-face generator.
Again, this is a question for apple.stackexchange.com or superuser.com.