Using the Google Font "Source Sans Pro" I find that Firefox and Safari won't render the Czech characters 'Š' and 'č' properly (it seems to fall back to the next-choice font, which I've set to serif in the example below for clarity:
However Chrome does a better job:
so the font definitely includes these characters. Is this a bug in those browsers or a mistake in my HTML?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Test document</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700'
rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Source Sans Pro', serif;
font-size: 16px;
}
</style>
</head>
<body>
<p>Here is my Czech colleague's surname: Šimečková</p>
</body>
</html>
Those accented characters are in the Latin Extended characters set. You should link to:
http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700&subset=latin-ext,latin
Related
The HTML is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
h1 {
font-family: 'Open sans',sans-serif;
font-weight: 300;
}
</style>
</head>
<body>
<h1>
Tām rō̜i ʻĀthit ʻUthai Rātsadō̜n</h1>
</body>
</html>
The bottom is Firefox 103.0.2 and top is Chrome 104.0.5112.79. (Running macOS Monterey 12.5)
When I change the font-weight from 300 to 400 (or more), Chrome starts displaying everything correctly. Not sure what the issue is.
Rendered Fonts section of Chrome (right) and Firefox (left).
There is a possibility that your language is not supported with utf-8 encoding, so check this out here: https://www.ibm.com/docs/en/aix/7.2?topic=globalization-supported-languages-locales.
also: better to import your data via url() as string, I mean replace
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
with
#import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700");
I have downloaded the font of my choice for punjabi language. But if I type in english only then it is giving me the required output, and if I write text in punjabi(gurmukhi) then it is showing me the output without applying the mentioned font face, i.e. showing the text as it is in punjabi(gurmukhi). Have tried this in HTML and CSS also but none is working....
Here is the HTML code :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prabhki font</title>
<style type="text/css">
#font-face {
font-family: myfont;
src: url(Prabhki.ttf);
}
h3{
font-family: myfont !important;
}
h1{
font-family: "Prabhki";
}
</style>
</head>
<body>
<h3>ਪੰਜਾਬੀ <br> panjabi</h3>
<h1>ਪੰਜਾਬੀ <br> panjabi</h1>
</body>
</html>
[![Output on chrome][1]][1]
[1]: https://i.stack.imgur.com/gXosP.png
We are using Google "Open Sans" font. The "less-than-or-equal" (≤) character is supposed to be supported by this font, according to:
http://www.fontspace.com/steve-matteson/open-sans/38448/charmap
(scroll down to Mathematical Operators)
But in Chrome it shows as being rendered in Arial, despite font-family: 'Open Sans' style being applied. What's going on here?
The font (Open Sans) may be not available in the computer target browser. Have import that font in your css/html?
How about this
html {
font-family: 'Open Sans'
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
Hai this is the symbol ≤
</body>
</html>
I use the 'Lato' font on the website. The characters in Polish and English are displayed correctly, while some Czech characters are bolded. Below you can see that these 3 characters are bolded. What is the reason of this problem? Is this a font or browser problem?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900&subset=latin,latin-ext" rel="stylesheet">
<style>
body {
font: normal 15px 'Lato';
color: #000000;
font-weight: 300;
}
</style>
</head>
<body>
<div style="font-size: 30px;">Pověřenec pro ochranu osobních údajů</div>
</body>
</html>
Additonal printscreen
The glyphs are not available in Lato 1.0, which is also still used by Google Fonts.
Use Adobe Typekit, or download the font and include it on your website to fix the missing (bold) characters.
Font can be found here
Removing the font size from the body css works fine:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&subset=latin-ext" rel="stylesheet">
<style>
body {
font: normal 'Lato';
color: #000000;
font-weight: 300;
}
</style>
</head>
<body>
<div style="font-size: 30px;">Pověřenec pro ochranu osobních údajů</div>
</body>
</html>
Not able to view the 'Open Sans' google font across all browsers. The
only place its getting applied is in Safari and iOS devices. Verified with
'Litmus' for cross browser compatibility issues. In every browser it is
showing different font.
Also tried applying the code for respective default font ignore(like eg:
san-serif !important). Still same inconsistent output - 'Open Sans' Font
not getting applied.
Note: I have to use online link as this is part of email template. I cant
use font downloaded on my server.
I m applying below code as described by many on stack-overflow.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
<meta name="robots" content="noindex,nofollow" />
<!-- [if !IEMobile] -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-
scale=1" />
<!-- [endif] -->
<title>ABC Co.</title>
<style type="text/css">
</style>
<!-- [if mso] -->
<style type="text/css">
</style>
<!-- [endif] -->
</head>
<body style="margin:0px; padding:0px; width:100% !important; -ms-text-size-
adjust: none;" -webkit-text-size-adjust:none; bgcolor="#ffffff">
<style type="text/css">
#import url(http://fonts.googleapis.com/css?
family=Open+Sans:400italic,600italic,700italic,400,600,700);
body, table, h1, h2, p, span { font-family:'Open Sans', sans-
serif!important; Helvetica !important; Arial !important; 'Times New
Roman' !important; }
</style>
...Content
</body>
</html>
As some suggested on this forum, I tried the above code keeping it in the
header style section also. But no change, same output.
Also tried href instead of import url in style tag.
<link href='http://fonts.googleapis.com/css?
family=Open+Sans:400italic,600italic,700italic,400,600,700'
rel='stylesheet' type='text/css'>
Any help in this regard will be greatly appreciated.