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>
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");
<html>
<head>
<title>innomotion media</title>
<style type="text/css" media="screen, print">
#font-face {
font-family: "Baiti";
src: url(fonts/baiti.ttf");
}
body { font-family: "Baiti", serif }
</style>
</head>
<body>
This is Baiti
</body>
</html>
As a long time coder, I have always dodged HTML or CSS. But it is time I need a webpage. Basic syntax is clear to me, however I already stumbled across using my custom font.
The html file is located on my drive. Next to it is a local folder called "fonts". I thought I had referenced that folder correctly and by opening the webpage, the font "Baiti" is used.
But it isnt. It displayed some def. times new roman or something.
What is it I am doing wrong?
<html>
<head>
<title>innomotion media</title>
<style type="text/css" media="screen, print">
#font-face {
font-family: "Baiti";
src: url(fonts/baiti.ttf");
}
body { font-family: "Baiti", serif }
</style>
</head>
<body>
This is Baiti
</body>
</html>
src: url("./fonts/baiti.ttf");
Also make sure that the Font Family matches the name when you preview the font. and also the type if you are using woff or woff2
like,
src: url("./fonts/baiti.woff");
src: url("./fonts/baiti.woff2");
Firefox is not rendering Open Sans semibold properly. But the same code in Chrome renders the font. Font is installed in my system. Is it possible to render it without using font weight property?
<html>
<style>
p{
font-family:"Open Sans Semibold";
}
</style>
<body>
<p >test</p>
</body>
</html>
Instead of specifying in font-family property passed in font-weight with a value of 600 if font has been installed.
Example:
p {
font-family: 'Open Sans',sans-serif;
font-weight:600;
}
Hope this works..
try this
body{font-family:"Open Sans"}
h1{font-weight:400}
h2{font-weight:600}
h3{font-weight:700}
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
</head>
<body>
<h1>Test one</h1>
<h2>Test two</h2>
<h3>Test three</h3>
</body>
</html>
I've been making a website, but the only fonts I could get working were Monospace, Arial, and the default (Times New Roman?) I tried to find a font like this:
I tried:
<body style="font-family:tahoma;">,
<body style="font-family:cabin;">,
and many others, but I couldn't find any fonts that would work. And the ones that did work all looked the same and were very ugly. Do you know of any fonts that would work regardless of operating system?
One option would be Google Fonts, easy to implement.
Link of reference list:
Google Fonts
Example:
body {
font-family: 'Open Sans', sans-serif;
}
.bold { font-weight:600; }
.bitter { font-family: 'Bitter', serif; }
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bitter|Lato" rel="stylesheet">
</head>
<body>
<p>This font is <span class="bold">Open Sans</span></p>
<p class="bitter">This font is <span class="bold">Bitter</span></p>
</body>
</html>
An alternative, would be to create your own font with Font Squirrel (Webfont Generator)
Sans Serif
Arial
Arial Black
Tahoma
Trebuchet MS
Verdana
Serif
Courier
Courier New
Georgia
Times
Times New Roman
Monospace
Courier
Courier New
https://templates.mailchimp.com/design/typography/
To get your font looks the same in all OS you'll better use a font from a font provider like Google Fonts
for your case you can add this line in your header
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
and after that try
<body style="font-family:Lato">
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