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;
Related
Google Fonts not working with bootstrap. I'm using Google Font and Bootstrap for my website, but google fonts don't seem to work. As soon as I comment out the bootstrap CSS, Google font appears again.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<!-- Bootstrap CSS -->
<!-- Try commenting this and font will start working -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Hello World</h1>
</header>
<!-- Bootstrap Script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
And CSS:
/* Google Font Link */
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
margin: 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgb(168, 168, 168)), to(#464645)) fixed;
/* Font Family Not Working */
font-family: 'Poppins', sans-serif;
}
header{
background-color: antiquewhite;
text-align: center;
padding: 10px;
}
JSFiddle Here
Tried Solution:
Google font not working with bootstrap This didn't work for me
Tried Googling around ...no solutions.
You can override the Bootstrap theme either by changing the source SASS files or by overriding the CSS variables used by the framework.
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
#import url('https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css');
:root {
--bs-font-sans-serif: Poppins;
}
<main role="main" class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>
This how it worked for me.
*{
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
outline: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/index-html.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300&display=swap" rel="stylesheet">
<title>Stackoverflow Answer</title>
</head>
<body>
<h1>Google Fonts Imported </h1>
<script rel="preconnect" src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
I can't get my css to over ride Bootstrap, or i'm not linking it properly? My .css is in the same file as my .html, I've placed my stylesheet below Bootstrap, still no avail. I've tried creating id's to over ride, still nothing. If I link in a stylesheet from W3Schools though it'll override Bootstrap. Is it just my css file? I know it's not best practice but I also tried using !important in my .css but still nothing. Here's my code:
#charset "UTF-8";
#import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
.h1 {
font-family: 'Roboto', sans-serif;
color:blue;
}
<!DOCTYPE html>
<html lang="en">
<HTML>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="photographywebsite.css">
<title>
Photography Website
</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</HTML>
The problem isn't with the linking of your Stylesheet.
Instead you are not referencing the element "h1" but an element with the class of "h1".
Try to change your code to:
h1 {
font-family: 'Roboto', sans-serif;
color:blue;
}
or add the class "h1" to your heading.
For reference on css selectors check out https://www.w3schools.com/cssref/css_selectors.asp
Remove this line from stylesheet reference and try
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"
so i just activated ssl for my website and i noticed that the font changed. It went from League Sparton Bold to something slightly different. It is not exactly what i desire. Here is what i wrote in css
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://allfont.net/allfont.css?fonts=league-spartan" rel="stylesheet" type="text/css" /><head>
<script src="jquery-3.5.1.min.js"></script>
</head>
<style>
body,h1,h2,h3,h4,h5,h6 { font-family: 'League Spartan Bold', arial; }
body, html {
height: 100%;
color: #777;
line-height: 1.8;
min-width: 100%;
}
</style>
here is what it looks like with http, which is also what i want for https:
and this is what it looks like in https,
The problem comes from the CSS file which has been linked to by
<link href="https://allfont.net/allfont.css?fonts=league-spartan" rel="stylesheet" type="text/css" />
Although the actual linking is requested using https, if you look within the file you will see it has:
#font-face{font-family:league spartan bold;font-style:normal;font-weight:700;src:local('League Spartan Bold'),local('LeagueSpartan-Bold'),url(http://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.woff) format('woff'),url(http://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.ttf) format('truetype')}
and so if the font isn't local, it tries to get it from allfont.de but with http
One way of getting over this problem would be to put this code direct into style in your header, altering the two http to https so you aren't dependent on allfont's text.
#font-face{font-family:league spartan bold;font-style:normal;font-weight:700;src:local('League Spartan Bold'),local('LeagueSpartan-Bold'),url(https://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.woff) format('woff'),url(https://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.ttf) format('truetype')}
Embed or import the font from somewhere you can also download the font then use #font-face to import it in your site like this:
#font-face {
font-family: 'League Spartan Bold'; // You can use any name
src: url(fonts/thefont.ttf) format('TTF') // The path of the font file
// You can use many formats like TTF, OTF, WOFF
}
So, by this way you can host your own font and don't need to be depended on a third party service (which can be down any time).
<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");
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