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">
Related
<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");
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>
so I'm trying to import a local font, but for some reason it's not being recognized, can I get some quick help on where I'm going wrong please?
I currently have 3 documents: index page, stylesheet.css and fonts.css.
I'm trying to use the font 'cinzel' however it's not working.
Index page:
<html>
<head>
<link rel="fonts" type="text/css" href="css/fonts/fonts.css"/>
<link rel="stylesheet" type="text/css" href="css/stylesheet/stylesheet.css"/>
<style type="text/css">
</style>
<title>
RENTDrive
</title>
</head>
<body>
<h1> RENTDrive </h1>
<hr>
<h3> Lots of exotic cars to choose from</h3>
Book your vehicle now! <p> Terms and conditions apply</p>
</body>
stylesheet.css page:
h1 {
font-family: 'cinzel';
}
h3 {
font-family: 'cinzel';
}
And the fonts.css page:
#font-face {
font-family: 'cinzel';
src: url('css/fonts/Cinzel-Regular.otf') format('opentype'),
url('css/fonts/CinzelDecorative-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
Can you change the rel to stylesheet.
<link rel="stylesheet" type="text/css" href="css/fonts/fonts.css"/>
heading tag's default font-weight is bold(in user agent stylesheet).
so, you will remove font-weight: normal, you can see that
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>
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