For some reason, I can not get my fonts to appear on the page. I am opening this up from a static page on my computer. The html, css and fonts are all in the same folder. I have tried adding "./" and "/" in front of the the font location, but it did not work. The CSS file is loading. Thoughts?
font.css
#font-face {
font-family: 'American-Typewriter';
src: url('american-typewriter.eot');
src: url('american-typewriter.eot?#iefix') format('embedded-opentype'),
url('american-typewriter.woff2') format('woff2'),
url('american-typewriter.woff') format('woff'),
url('american-typewriter.ttf') format('truetype'),
url('american-typewriter.svg#american_typewriterregular') format('svg');
font-weight: normal;
font-style: normal;
}
.American-Typewriter {
font-family: 'American-Typewriter';
}
webpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font.css">
</head>
<body>
<h1 class='American-Typewriter'> American-Typewriter </h1>
</body>
</html>
I think this is a problem with addressing.
Try using only /
You need to first use code in your code in order to have standard HTML as below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font.css">
</head>
<body>
<h1 class='American-Typewriter'> American-Typewriter </h1>
</body>
</html>
Also you need to download the font if you still not able to see it from below link.
http://fontsgeek.com/fonts/American-Typewriter-Regular
If they're in the same folder, then you don't need anything before the filename!
/ is used when the object you're looking for is in a folder, and ../ is used when it's in the folder enclosing the current folder, e.g. the one the file is in.
Related
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
Here's how I tried to include a font in my HTML project:
#font-face {
font-family: 'Commodore';
url('Commodore-64-v6.3.ttf') format('truetype');
}
p {
font-family: Commodore;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font Family Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
The specified ttf font is in the same directory as the CSS and HTML files, but is not used? Instead it's using some Times -like font. Why?
You are not using the right syntax of #font-face Try below
#font-face {
font-family: 'Commodore';
src: url('Commodore-64-v6.3.ttf') format('truetype');
}
p {
font-family: Commodore;
}
You can read more about #font-face here
Try adding src: before url like this
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('../fonts/font.ttf'); /*URL to font*/
}
Also, put your font in the "fonts" folder.
The best and most convenient way of including fonts is via the Google Fonts API as follows:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Just apply this font via:
P {
font-family: 'Roboto', sans-serif;
}
I am currently trying to use Google Fonts to render a custom font on a webpage hosted on Flask however the font does not apply. When I try the same html and css files in my browser without Flask, the fonts show. Any reason why Google fonts may not work with Flask?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One" rel="stylesheet">
<link rel="stylesheet" href="googleFonts.css">
<title>Google Fonts</title>
</head>
<body>
<p class="header">This is Google Fonts</p>
</body>
</html>
CSS
.header {
font-family: 'Fredoka One', cursive;
font-size: 50px;
}
I have used Font Awesome icon in my project. The HTML page generate from XSL Template as follows-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="IE=9; IE=EDGE" http-equiv="X-UA-Compatible" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css?ver=T1.0" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css?ver=T1.0" />
<link rel="stylesheet" type="text/css" href="css/style.css?ver=T1.0" />
<link rel="SHORTCUT ICON" href="images/favicon.ico" />
</head>
<body>
</body>
After searching on stackoverflow I added meta tag in head to render document mode to latest available version. Even my base FONT (Lato) also not load and Still Font Awesome icon disappear in my page In IE (IE9 & IE11) compatibility mode.
Please suggest, what I am missing?
regards,
Here is my style.css -
#font-face{
font-family: 'Lato';
src: url('../fonts/lato-v11-latin-regular.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: normal;
src: url('../fonts/lato-v11-latin-regular.eot');
src: local('Lato Regular'), local('Lato-Regular'),
url('../fonts/lato-v11-latin-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/lato-v11-latin-regular.woff2') format('woff2'),
url('../fonts/lato-v11-latin-regular.woff') format('woff'),
url('../fonts/lato-v11-latin-regular.ttf') format('truetype'),
url('../fonts/lato-v11-latin-regular.svg#Lato') format('svg');
}
In other browser Chrome, FireFox and IE9 & IE11 (Normal Mode) working fine.
Another think is - if install font fontawesome-webfont.ttf in sytem through control panel (windows) then its working fine.
As suggest some website I have added Font Face twice.
Here you can try to use this code <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> from this article
Update1
Here might be the issue to be referenced.
As suggested by the font awesome members
"This still fails on IE9 when the font doesn't have full "Installable" permissions. Only solution seems to be to edit the font permissions or serve it from the local server."
One more thread which might be able to help
I just started creating a personal website for me, then I came across a problem. As soon as I include two stylesheets, the second stylesheet doesn't load (doesn't render). My first stylesheet that does load (does render) looks like this:
#font-face {
font-family: 'archive';
src: url('archive-webfont.eot');
src: url('archive-webfont.eot?#iefix') format('embedded-opentype'),
url('archive-webfont.woff2') format('woff2'),
url('archive-webfont.woff') format('woff'),
url('archive-webfont.ttf') format('truetype'),
url('archive-webfont.svg#archive') format('svg');
font-weight: normal;
font-style: normal;
}
The second stylesheet that doesn't load (doesn't render) looks like this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #FFFFFF;
background: #333333;
}
h1 {
margin: 0;
font-family: archive;
}
My HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Jacques Marais</title>
<link rel="stylesheet" href="fonts/archive.css" title="Archive Font CSS" />
<link rel="stylesheet" href="css/master.css" title="Master CSS" />
</head>
<body>
<h1><span class="first-character">J</span>acques Marais</h1>
</body>
</html>
When I look at the Resources panel in the Developer Tools, it shows both stylesheets, but when I look at the Sources panel, it only shows that one loaded:
Sources
Resources
I tried all methods mentioned here and here.
Update
Here are the Network and Console panes.
Update 2
Update 3
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Jacques Marais</title>
<link rel="stylesheet" href="fonts/archive.css" />
<link rel="stylesheet" href="css/master.css" />
</head>
<body>
<h1><span class="first-character">J</span>acques Marais</h1>
</body>
</html>
I just deleted the title attribute inside your link tag and it works. (I've tested it on my webserver)
No title attribute inside <link> tag.
http://www.w3schools.com/tags/tag_link.asp
Ops, never mind, it supports global attribute (included title), anyway if you delete them the page works... I've noticed also it works if you leave title attributes but without spaces inside them.
Try to change your titles and delete all the spaces.
I am not sure is it really work or not. I have faced this same problem and found solution. At the second stylesheet do like this -
h1 {
margin: 0;
font-family: 'archive'; /* add your font-family name inside '' */
}