I am currently working on developing an HTML and I am using Bootstrap to make it more mobile-friendly. However, the bootstrap font sucks and I am looking to override it and replace it with a better looking font. I am posting the head of my HTML file. It looks like this:
<head>
<title> Connotate Engineering </title>
<meta name=viewport content='width=700'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
And this is what my CSS looks like:
body{
font-family: 'Arial';
font-size: 12px;
}
#images{
font-family: 'Arial';
text-align:left;
font-style: regular;
letter-spacing: 0;
line-height: 1.5em;
text-decoration: none;
word-spacing: 0;
}
#images a{
margin:0px 20px;
display:inline-block;
height: 100%;
text-decoration:none;
color:black;
font-family: 'Arial', serif;
}
.caption {
width: 200px;
text-align: center;
}
#media screen and (max-width:480px) {
#sidebar { display: none;}
}
Change the link positions in your <head> from this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
To this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
The order matters, you want your final changes to be below all others.
And as Arham pointed out, if you put in an inline style, it will have a higher priority than the bootstrap.
If you want the whole page to have that font then you should either remove all font rules in all elements then add body { font-family: 'Indie Flower', cursive; } or include all elements you want to have that font like:
body, #images, #images a {
font-family: 'Indie Flower', cursive;
}
One way is to add the style attributes within the desired tag itself.
ie: (you want to override a certain style on a div)
<div style = "font-family: Arial">
Related
Here's my code of index.html:
<!DOCTYPE html>
<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>CodeWare</title>
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<div class="hero">
<h1>Coding</h1
<h1>Redefined.</h1>
</div>
</body>
</html>
Styles.css:
:root {
--color-Primary: #ff0505;
}
html {
font-size: 62.5%;
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
}
.hero {
background-color: var(--color-Primary);
height: 50rem;
}
h1 {
padding-left: 2rem;
padding-top: 2rem;
color: #ffffff;
margin-top: 0px;
font-size: 9rem;
font-weight: 700;
}
In index.html, it works if I use style="margin-top: 0px;" in the h1 attribute. If I instead type it in styles.css as margin-top: 0px;, It doesn't work. Like why? Some one please help me
You only need to change the order of 2 css files (styles.css and normalize.css)! The order matters! (Now the h1 rule in normalize.css (h1{font-size: 2em;margin: 0.67em 0;}) override your rule from styles.css)
You are injecting normalize.css after your own styles, that's why "margin:0px" is overriden by "margin: 0.67em 0;" rule from normalize.css.
All you need to do is to include normalize.css first.
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
I made a website with GitHub and the font I used (Lato) only seems to be showing on Google Chrome, but just on macOS and Android phones. Safari, iPhones, and Windows laptops display Times New Roman instead. I'm not sure what the issue is, since I picked Lato for being a Google font? Shouldn't it work across all browsers/operating systems/devices? Am I supposed to upload the font folder in my GitHub repository? Also don't know if it matters, but my code used "font-family" to call in Lato. Should I not be using that?
EDIT: adding my code for reference
HTML
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<script src="https://kit.fontawesome.com/3fdadcecb8.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
</head>
CSS
.title {
font-family: "Lato";
text-align: left;
}
.text {
font-family: “Lato”;
font-weight: 300;
text-align: left;
}
.bold {
font-family: "Lato";
font-weight: 700;
}
You need to add the following into your <head> tag:
<link href='http://fonts.googleapis.com/css?family=Lato:300,700,900' rel='stylesheet' type='text/css'>
Then your CSS should be as follows:
.body {
font-family: "Lato";
}
.title {
font-weight: 900;
font-size: 3em;
}
.text {
color: black;
font-weight: 300;
}
.bold {
font-weight: 700;
}
Here is a working example: https://codepen.io/fraggley/pen/YzyaNJa
I FIXED IT.
Basically, what caused the issue was enforcing https on my website. The font was linking to an http, so I just changed it to https and now it works :D
At the top of my code I have:
< link href=" https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" >
And in my CSS I have:
font-family: 'Merriweather', ;
But it is not showing up. I'm not sure what the reasoning is. It seems so simple and yet nothing is working.
Any help would be appreciated.
Here is the top of my HTML:
<link rel = "stylesheet"
type = "text/css"
href = "stylesheet.css" />
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<head>
<title>Jesse | Personal Chef </title>
<meta charset="UTF-8">
<meta name="description" content="Jesse Personal Chef">
<meta name="keywords" content="Food, Chef, Wilmington, NC, North Carolina Food, In Home Chef, Personal Chef, Chef For Hire, Jesse,">
<meta name="author" content="Cal & Jen T.">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
This is my CSS, saved in as stylesheet.css:
<style>
/* HEADERS ~~~~~~~~~~ */
h1 {
font-family: 'Merriweather', ;
text-align: center;
font-size: 2.7em;
color: 000;
font-weight: 500;
letter-spacing: 2%;
line-height: 40px;
padding-bottom: -100px;
margin: 2%;
}
.subtitle {
font-family: 'Merriweather', ;
text-align: center;
font-size: 1.04em;
color: 000;
font-weight: regular;
margin: 1;
line-height: 1px;
padding-bottom: 60px;
}
</style>
Thank you
One little fix needed:
Change this:
font-family: 'Merriweather', ;
To this:
font-family: 'Merriweather', serif;
The serif portion is the fail-over font in case it can't find Merriweather.
Test it in this snippet:
<html>
<head>
<link href=" https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" />
<style>
div {
font-family: Merriweather, serif;
}
</style>
</head>
<body>
<div>Test</div>
</body>
</html>
You can also just apply the font-family style to the <body> tag and all child elements will inherit that font-family.
Check fonts link:
if you use #font-face rule check link to the folder with fonts and be sure that font files is present in this folder, also check fonts name in #font-face rule and in font-family they must be equal;
if you use CDN - check the link to the CDN;
Open Dev Tools in your browser(Ctrl(Command) + Shift + I) and in the tab Network check whether your font is downloaded or not: https://prnt.sc/r9x8ab;
I'm trying to upload the Montserrat font from google fonts on a website I'm building and for some reason it's not happening. I've read a separate Q&A on here that suggests it may be an issue with chrome?
I want Montserrat specifically because it's the closest google font likeness to Gotham.
This is how I have it loaded on my file -
style.css
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,80);
body{
font-family: 'Montserrat', sans-serif;
}
I tried it also in my <head> section in index.html underneath the bootstrap link -
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,800" rel="stylesheet">
I don't know whether it's an issue with bootstrap not wanting to override or a separate issue. Any assistance appreciated.
Follow the below code.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,800" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
}
</style>
<body>
<h1>Montserrat</h1>
</body>
I had a similar issue and this is how I solved it.
First import the "Montserrat" font to the "bootstrap.css"
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
then replace the font-family with Montserrat;
body {
margin: 0;
font-family: Montserrat;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
I can't see what is wrong with this. I have 2 HTML sheets and a CSS sheet.
The first HTML sheet (index.html) is like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Olive</h1>
Enter
</body>
</html>
The second HTML sheet (page1.html) is this:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
And the CSS external sheet:
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
The issue is that the id from the second HTML sheet (page1.html) doesn't work. I don't know why. I don't know if it's the syntaxis or what.
The body attributes are working in page1.html, but the id attributes don't. The <p> element only appears with any style. Could someone tell me what's wrong with this?
Few tips for debugging... try to make cache refresh few times when you have modified your css styles (with chrome and windows: ctrl+shift+r) then if it doesnt work try to use code below and cache refresh again:
#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 50px !important;
color: white !important;
}
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied.
Code:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
Edit:
Solution was to put .css stylesheet to correct folder.
Cheers.
Not sure if this is the issue, but your first line should be:
<!DOCTYPE html>
If you don't declare it properly, your browser could render in quirks mode which can result in all sorts of odd behavior.
The syntax is correct, but maybe the script is any command that changes the style for this id.