<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");
Related
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;
}
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
I am trying to use a custom font on my webpage, but it isn't working. Any idea why?
#font-face {
font-family: 'raleway';
src: url("Raleway-Regular.tff") format("truetype");
}
.logoarea {
float: left;
}
.logo {
width: 120px;
height: 74px;
}
.topnavbar {
font-family: 'raleway';
}
That is my css code. I have already checked to make sure the spelling of the file is correct. the css and my font are in the same directory.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<!-- TEMP - AUTO REFRESH -->
<meta http-equiv="refresh" content="2" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>OJMari</title>
</head>
<body>
<div class="logoarea">
<img src="images/logo.png" alt="OJMari Logo" class="logo" />
</div>
<div class="topnavbar">
test
</div>
</body>
</html>
That is my html code. I don't see anything wrong with it.
I have already validated both of these, so does anyone know why this is happening? For those who are curious, this is what my html output on Google Chrome 59 looks like. HTML Output
It seem the font type is incorrect format. Please change font extension to .ttf
#font-face {
font-family: 'raleway';
src: url("Raleway-Regular.ttf") format("truetype");
}
The issue is that different browser will need different font files format, see: https://help.webflow.com/article/list-of-font-file-types-for-maximum-browser-support
Not sure if you use sass but this should give you an idea of what I mean:
https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
I've been looking through Search Q&A before asking my question but I didn't find any answers.
For my project I have to make a website, they gave me a folder "fonts" to download containing the fonts I need, I have 2 fonts, 'FontAwesome' and 'glyphicons-halflings' here's the code I wrote for these fonts:
#font-face
{
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot');
src: url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/fontawesome-webfont.woff') format('woff'),
url('fonts/fontawesome-webfont.ttf') format('truetype'),
url('fonts/fontawesome-webfont.svg#FontAwesome-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face
{
font-family: 'glyphicons-halflings-regular';
src: url('fonts/glyphicons-halflings-regular.eot');
src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('fonts/glyphicons-halflings-regular.woff') format('woff'),
url('fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('fonts/glyphicons-halflings-regular.svg#glyphicons-halflings-regular') format('svg');
font-weight: normal;
font-style: normal;
}
then I tried to use my fonts:
header h1
{
font-family: 'FontAwesome';
}
When I tried to use FontAwesome, nothing changed the basic fonts remain, I also tried to use my second fonts 'glyphicons-halflings-regular' and with this fonts the basic fonts remain but there's more space between my words like this.
Here's a screenshot of my fonts folder, my stylesheet is in my folder 1-Projet so normally there's no problem for the URL, I also tried with someone to use the fonts with google link, but it didn't work.
Does anyone know where the problem come from?
I would consider including font-awesome using library using CDN
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Then add your own CSS class something like .fa that just has font-family:FontAwesome
.fa {
font-family: FontAwesome;
}
then on your element you could add the font-awesome class for the particular icon you want e.g
<h1 class="fa fa-check fa tick"></h1>
Below is how we have implemented with extra CSS for our .fa class
But could have just like below
Font Awesome Icons displayed with HTML Code
== edit: example HTML for simple font awesome page, sopy below and save as a .html file and see if works for you as a starting point ==
<!doctype html>
<!--[if lte IE 8]> <html lang="en" class="ie-lte8"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
font-family: "FontAwesome";
}
</style>
</head>
<body>
<h1 class="fa fa fa-check fa-tick">This is font awesome</h1>
</body>
</html>
thank you for your answer,
i made a mistake on my post i said i used google link with my friend but it was this bootstrap link i used and it still didn't work, i also tried to use this class as you said and it didn't work, even though, when i inspect my page font-family: 'FontAwesome'; appear, i also tried font-family: FontAwesome as you said to make sure if there's no miracle lol,
i also tried to use the font on something else than my h1 but it still didn't work
edit i tried your html code and i could see the icon appearing before the font, but it seems that the font still doesn't work
Trying to set an external font for the entire body but no changes occurs. The font file is in the correct location. Tested with other fonts that is present such as Times New Roman and font doesn't change either.
I am using bootstrap but calling my custom css file after bootstrap thus I believe it should override bootstrap. I have other custom css in that same file which is executing other codes correctly. To play it safe I called font-family with !important and no changes either. What is wrong here.
<!-- html page to show how I place my css files. -->
<head>
<title>A Title</title>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/bootstrap.min.js"></script>
<!-- Custom Files -->
<link type="text/css" rel="stylesheet" href="css/styles.css">
<script src="js/scripts.js"></script>
</head>
/*styles.css file*/
#font-face {
font-family: "KenzoCustom";
src: url(kenzo-regular.otf);
}
body{
background-color: #eaeaf4;
/*font-family: "Times New Roman", Times, serif;*/ /*No change either*/
font-family: KenzoCustom, serif;
}
<!-- Working Code -->
#font-face {
font-family: KenzoCustom;
src: url('../fonts/kenzo-regular.otf');
}
body{
background-color: #eaeaf4;
font-family: KenzoCustom, serif;
}
sometimes parent css applied on that you have to use
font-family: "KenzoCustom", serif !important;