The following setup
HTML
<!DOCTYPE html
SYSTEM "about:legacy-compat">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>SymbolTest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<span class="greek">μ ω Ω ≥ ⊗ ↔ ± √ ≠ ♦ ♥ ♠ ⇐ ⇒ ⊥ ♦ ⊆ ∅</span>
</body>
</html>
CSS
#font-face {
font-family: Symbol;
src: url("../fonts/Symbol/symbol.eot");
src: url("../fonts/Symbol/symbol.eot?#iefix") format("embedded-opentype"), url("../fonts/Symbol/symbol.woff2") format("woff2"), url("../fonts/Symbol/symbol.woff") format("woff"), url("../fonts/Symbol/symbol.ttf") format("truetype"), url("../fonts/Symbol/symbol#symbolregularregular") format("svg");
font-weight: normal;
font-style: normal;
}
span.greek {
font-family: Symbol;
}
Produces very weird results in Internet Explorer compared to other browsers;
Crome, Local
Chrome, Server
FF, Local
FF, Server
IE10, Local
IE10, Server
IE11, Local
Asks me wether I want to allow ActiveX components - Note that in the background, the font used is the default windows Symbol font...
After clicking "accept", it changes to
What is going on here? I created the font using FontSquirrel and used the "bulletproof" #font-face syntax, but it's still not working as expected...?
After further investigation, the issue seems to be resolved. As Mr Lister pointed out, IE itself apparently doesn't like when you paste UTF8 symbols and wrap them in the Symbol font.
I checked into the Symbol font with a designer colleague and it appears that IE tries to actually use the typed character (e.g. U+221A which is SQUARE ROOT) and maps it against the used font - Symbol.
Symbol obviously doesn't have a proper character for the character at code point 8730 - because Symbol only supports 255 characters.
This means, IE will display a ? instead.
The insteresting point here is, that the other browser fall back to the default font and use the UTF8 value of the character and display it properly.
The solution we now use is to not use any font, as the whole publication process is UTF8 anyway, so there is no need to actually use the Symbol font anywhere. We just copy all characters as they are, and it works.
Related
I want to serve local Chinese fonts to the browser, but it does not seem that chrome or firefox load them. What might have gone wrong here?
I have tried writing the path in various ways - absolute/relative paths, but it still won't work. Network tab of chrome doesn't seem to reflect loading any local font files.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="font_face_index.css">
</head>
<body>
<svg width="800" height="400">
<text font-family='5' font-size="20px" y="50" x="50">咬释征巩个第涉景试为工给期催音足疗牛</text>
</svg>
<h2 style="font-family:'KaiTi';">咬释征巩个第涉景试为工给期催音足疗牛</h2>
</body>
</html>
//////////////////////
font_face_index.css
/////////////////////
#font-face{font-family:"0";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/A Li Da Slender Bold Elegant Chinese Font -Simplified Chinese Fonts.ttf")format("ttf");}
#font-face{font-family:"1";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Aquarius Chinese Font-Simplified Chinese Fonts.ttf")format("ttf");}
#font-face{font-family:"2";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Devil May Cry Art Chinese Font – Simplified Chinese Fonts.ttf")format("ttf");}
#font-face{font-family:"3";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Energetic Cute Chinese Font – Simplified Chinese Fonts.ttf")format("ttf");}
#font-face{font-family:"4";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Aa Pisces Bubble Chinese Font-Simplified Chinese Fonts.ttf")format("ttf");}
#font-face{font-family:"5";font-style:normal;font-weight:400;src:url("subset_fonts_chinese_2700_glyphs/Accompany you forever Font-Simplified Chinese.ttf")format("ttf");}
'KaiTi' that is locally installed on my machine is working whereas the text defaults to whatever the default font is. (I have tried all of the fonts listed here).
For Windows system, use escape character in the file name, or rewrite with hyphens.
For example:
#font-face {
font-family: 'A-Li-Da-Slender';
src: url(font/A-Li-Da-Slender-Bold-Elegant-Chinese-Font-Simplified-Chinese-Fonts.ttf);
}
or
#font-face {
font-family: 'A-Li-Da-Slender';
src: url(font/Aa\ Aquarius\ Chinese\ Font-Simplified\ Chinese\ Fonts.ttf);
}
I have this Html code in the head (for the Google Font and for the utf-8 encoding for Hebrew):
<link href="https://fonts.googleapis.com/css?family=Suez+One" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
I have this code in the style tag:
<style>
body
{
background-color:#ff8000;
font-family: 'Suez One', serif;
}
</style>
When I write in English/ numbers the font works properly in all browsers, but when I write in Hebrew the font doesn't work in Internet Explorer (works only with Google Chrome and Firefox).
Thanks in Advance.
The font was rejected by the sanitizer according to the message in the mozilla debugger. Other fonts have worked. HTML and css both validated, but font still doesn't work.
#font-face {
font-family: "parisr";
src: url("parisr.woff") format("woff");
}
p
{
font-family : "parisr";
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>INDEX.HTML</title>
<link rel="stylesheet" href="style.css">
<style type="text/css"></style>
</head>
<body>
<p>With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts. Internet Explorer 8 and earlier, do not support the #font-face rule.</p>
<div id="element1"></div>
<div id="element2"></div>
<div id="element3"></div>
</body>
</html>
ok so with web fonts its not exactly because of css3, its because of security reasons fonts can be dangerous. some browsers like firefox will only allow the font from the domain eg, if your running a website that you can get to via 2 domains like mywebsite.com and mywebsite.com.au the fonts have to be served from those domains.
you do this like you have done above in your stylesheet, But make sure that the urls to the fonts are correct. the above css states that the url of the font is yourwebsite.com/parsir.woff if this is correct thats good but you might also require the other versions which you can do here https://www.web-font-generator.com/
I'm using Kiro and Lato font for some text, in my text I have Romanians diacritics.
Kiro has diacritics when I'm using in Photoshop and I included Lato like
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900&subset=latin,latin-ext" rel="stylesheet" type="text/css">
But apparently diacritics show up in Times New Roman I think (check pic bellow)
Also I need to mention that in my I have:
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
Can someone explain me how to fix that, and why diacritics have the incorrect font?
Maybe it is not supposed to. But bear with me. I am using Google Web Fonts, and I am including PT Sans font like so:
<link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
and I even have .htaccess set like so:
<IfModule mod_headers.c>
<FilesMatch "\.woff$">
Header set Content-Type "application/octet-stream"
</FilesMatch>
<FilesMatch "\.ttf$">
Header set Content-Type application/octet-stream
</FilesMatch>
</IfModule>
Now PT Sans font does not include Baltic (ąčęėįšųūž) characters, which I am using. But Chrome, Firefox, IE render them all perfectly - not even using another font. Opera just skips them and leaves an empty space.
Just realized that it only does it with bold fonts. Check this example:
<!doctype html>
<html lang="en" class="no-js">
<head>
<title>Font test</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
</head>
<body style="font-family:'PT Sans';">
aceeisuuz<br />
ąčęėįšųūž
<p style="font-weight:bold">ąčęėįšųūž</p>
</body>
</html>
Now how do I fix it?
Looks alright to me, I just threw your example code into a jsfiddle. Maybe there's something else going on with your CSS/page?
http://jsfiddle.net/MetalFrog/gHhGv/
Since the PT Sans font does not contain the Baltic characters, browsers will use some fallback fonts. In the absence of declarations for this in the page style sheet, they will use their default methods, so browser differences are to be expected.
It is not clear why Opera sometimes fails here, but it is more important to provide some planned fallback. Either select a completely different font, or at least specify some alternate fonts in your font list, e.g. font-family: 'PT Sans', Arial, sans-serif. This prevents odd mixtures, like PT Sans and Times New Roman (the common default font) and may well circumvent the Opera bug too.
I've encountered same problem.
solution was:
Google Web Fonts page | Chose your cirilic Font | Quick usage | Verify your settings... -> add Cyrilic set to selection.
Clear Opera cache;