I used the Archivo Narrow font from the Google web fonts but the diacritics display from the body font which is Lucida Grande. So everything but the romanian diacritics (that i need) are shown in the Archivo Narrow font. And is not a problem of missing glyphs.
I have this in the <head>:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
and in css i call the font like this:
font-family:'Archivo Narrow', sans-serif; !important;
Change the href attribute value in the link element to
http://fonts.googleapis.com/css?family=Archivo+Narrow&subset=latin,latin-ext
as instructed in the Google instructions when you check the “Latin Extended (latin-ext)” checkbox. The exact meaning of this checkbox is undocumented, but apparently you should use this option whenever you have Latin letters beyond the Latin 1 (“Western”) repertoire
Related
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?
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.
I tried to use the Ubuntu font in my page by adding a link:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
Here is the CSS:
body{
font-family : Ubuntu;
}
It works but sometimes the font can't recognize slovak characters like "č, ž". These are a different font (not Ubuntu). For example in a mobile sized screen (when I push ctrl+shift+m in firefox = mobile view).
Do you know what the problem is?
I don't know about the slovak font showing it correctly. Maybe you need to add latin-ext (You need to check the latin-ext to see if it supports Slovak characters. But if you are getting wrong characters on different browsers, it is because you didn't explicitly set the charset. Add the following line to the header:
<meta charset="utf-8">
This will force the browser to show the website in UTF-8, which will fix your problem.
Note that the link to the font says "subset=Latin". This is usually sufficient for ASCII-only text; for characters with diacritics, you need latin-ext, which means "extended Latin characters." This set should cover pretty much all characters used in European, Latin-script using languages (not Cyrillic, obviously).
This is configurable in the "character set" tab in Google's font picker.
I apologize, the code for importing external provider:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
In case the viewers of the site doesn't have the Ubuntu font in their devices please add this code:
Importing from external Provider:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
Then, add Ubuntu to your font family list:
body { font-family: Ubuntu, "Times new roman", Arial, San-serif, Ubuntu; }
Hope this helps.
I have a page where the content is in Armenian.
My question is, What steps do I need to take in order for the symbols to display correctly?
Currently, something like
"Պատվերների համար կարող եք զանգահարել"
produces
"ÕŠÕ¡Õ¿Õ¾Õ¥Ö€Õ¶Õ¥Ö€Õ« Õ°Õ¡Õ´Õ¡Ö€ Õ¯Õ¡Ö€Õ¸Õ² Õ¥Ö„ Õ¦Õ¡Õ¶Õ£Õ¡Õ°Õ¡Ö€Õ¥Õ¬".
As it stands right now, my page is pure HTML but I will be incorporating features built on Ruby/Rails and will also be translating that content in Armenian.
I have been reading about Rails Internationalization, but have never used it nor am I sure if that is the best/easiest option?
In my case works fine. Or you can use online converters to convert Armenian symbols to Unicode (in case of ANSI).
Should be working by adding <meta charset="UTF-8"> to the <head> of your HTML File and by using a font that supports Armenian Characters.
If you want to use a Webfont for this, for example Noto Sans from Google Webfonts should do the job.
Use this in your CSS
#import url(http://fonts.googleapis.com/earlyaccess/notosansarmenian.css);
body {
font-family: 'Noto Sans Armenian', serif;
}
Found here: https://www.google.com/fonts/earlyaccess
At first use "Brackets", then
<html>
<head>
<meta charset="UTF-8">
<title> Ինչ-որ կոդ </title>
</head>
<body>
Պատվերների համար կարող եք զանգահարել
</body>
</html>
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;