The problem:
- Downloaded webfontkit from font squirrel
- added the fonts to a new css file with font family, src, font-weight, font-style
- tried to apply it to my header
- checked my web browser, font changed to a default font but not the custom font I wanted
Things i've tried
- reexamined my code a few times
- downloaded the webfontkit again with other formats .ttf and .svg
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first-->
<meta charset="utf-8" />
<meta name= "viewport" content="width=device-width, initial-scale=1" />
<!-- build:css css/main.css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css" />
<link rel="stylesheet" href="css/styles.css" />
<!-- endbuild -->
<title>DEVEDAN: A Digital Marketing Agency</title>
</head>
<body>
<!--I hid the Navbar code because it was irrelevant-->
<!--WEBSITE CONTENT-->
<!-- Page content holder -->
<div class="page-content p-5" id="content">
<!-- Heading -->
<h2 class="display-4 text-white">DEVEDAN</h2>
<p class="lead text-white mb-0">Develop your business w/ Edson & Angelika</p>
<div class="separator"></div>
</div>
<!--I hid the jscode because it was irrelevant-->
</body>
</html>
fonts.css file
#font-face {
font-family: 'siffonOutline';
src: url('fonts/siffonoutline-webfont.eot');
src: url('fonts/siffonoutline-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/siffonoutline-webfont.woff2') format('woff2'),
url('fonts/siffonoutline-webfont.woff') format('woff'),
url('fonts/siffonoutline-webfont.ttf') format('truetype'),
url('fonts/siffonoutline-webfont.svg#sifonnbasic_outline') format('svg');
font-weight: normal;
font-style: normal;
}
styles.css file
/*Fonts*/
#import "fonts.css";
/*NAVBAR*/
.vertical-nav {
min-width: 17rem;
width: 17rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
}
.page-content {
width: calc(100% - 17rem);
margin-left: 17rem;
transition: all 0.4s;
}
/*WEBSITE CONTENT*/
h2 {
font-family: 'siffonOutline';
}
body {
background: #599fd9;
background: -webkit-linear-gradient(to right, #599fd9, #c2e59c);
background: linear-gradient(to right, #599fd9, #c2e59c);
min-height: 100vh;
overflow-x: hidden;
}
.separator {
margin: 3rem 0;
border-bottom: 1px dashed #fff;
}
Click link to view the output of my code: https://i.stack.imgur.com/ePLCh.png]
check #import path is rite or wrong
#import "fonts.css";
Related
Im trying to create my first web project using Brackets and cannot get the background image to show up.
My css code is
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
.header {
background-image: url(../img/hero.jpg);
background-size: cover;
height: 100vh;
}
h1 {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
I'm hungry!
Show me more
</div>
</header>
</body>
</html>
I've been following a course online and have typed all the code in identically. I don't know why my background image wont appear. I dont think its a problem with the file tree as when I click on the url(../img/hero.jpg) Brackets shows me that it recognizes the image. Any help would by greatly appreciated. Thank you.
You are targeting the class .header instead of the tag header.
header { /* Change from .header to header */
background-image: url("../img/hero.jpg"); /* Add Quotes */
background-size: cover;
height: 100vh;
}
I think there are two things going on here that will get it working again:
Your css declaration for header is referencing a class but I think you want it to reference a tag header.
Will want to make sure the url path is relative and surrounded by quotes. The example below references one that is hosted online. The snippet you supplied didn't have the path inside quotes: '../url/destination'
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
header {
background-image: url('https://global-uploads.webflow.com/5ef5480befd392489dacf544/5f9f5e5943de7e69a1339242_5f44a7398c0cdf460857e744_img-image-p-1080.jpeg');
background-size: cover;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
I'm hungry!
Show me more
</div>
</header>
</body>
</html>
Apparently CSS is not recognizing the file path. I suggest you describe it more extensively to resolve this error: "C:\Users\Name\img\hero.jpg"
I am working on a menu for my HTML class, at school, and I was trying to figure out how I could make it so my h1 and h2 text change to the color white when they reach the top of the page, which with the background image, is dark at the top. Below is my code. The h1 and h2 tags are the only ones I want to have change.
/*
$(document).ready(function() {
$(window).scroll(function() {
var light_pos = $('#white_div').offset().top;
var light_height = $('#white_div').height();
var menu_pos = $('.NavigationButton').offset().top;
var menu_height = $('.NavigationButton').height();
var scroll = $(window).scrollTop();
console.log('light', light_pos);
console.log('menu', menu_pos);
console.log('scroll', scroll);
if (menu_pos > light_pos && menu_pos < (light_pos + light_height)) {
$('.NavigationButton').addClass('menu_black');
$('.NavigationButton').removeClass('menu_white');
} else {
$('.NavigationButton').removeClass('menu_black');
$('.NavigationButton').addClass('menu_white');
}
})
})
*/
h1 {
font-family: 'Caveat', cursive;
margin-bottom: 100px;
border: 4px;
margin: 100px;
padding: 50px;
width: 300px;
}
b {
font-family: 'Nothing You Could Do', cursive;
}
h2 {
font-family: 'Nothing You Could Do', cursive;
font-size: 40px;
}
h3 {
font-family: 'Homemade Apple', cursive;
}
div {
border: 4px solid black;
margin: 100px;
padding: 50px;
width: 300px;
background: rgba(255, 255, 255, 0.3)
}
sup {
font-family: Verderna, Helvetica, sans-serif;
}
.NavigationButton {
position: fixed;
top: 5%;
right: 5%;
z-index: 99999;
font-weight: 700;
color: inherit;
}
.menu_white {
color: #fff;
}
.menu_black {
color: #000;
}
body {
background-image: url('https://bestanimations.com/media/beverages/405618319drink-animated-gif-16.gif');
/*Image sorce*/
background-repeat: no-repeat;
/*If changed to "repeat", image will repeat*/
background-attachment: fixed;
/*Does your image stay in one spot, or does it move as you scroll?*/
background-size: cover;
/*The resolution of the image*/
}
<title>Big Surf Island: Beverages Menu</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<!--Below is all the code for the fonts that I've used. All custom fonts used came from Google Fonts. [fonts.google.com]-->
<link rel="shortcut icon" type="image/png" href="2021_04_06_0fb_Kleki.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght#500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet">
<!--Background image for website -->
<h2 style='color:white'>Pick a drink, any drink!</h2>
<h1>Non-Alchoholic drinks</h1>
<!--1st Menu Item-->
<div>
<h3>Fountain Drinks--------------------1.99</h3>
<b>Choose any of our fountain drink, in any flavor you want!
<img height=132px; width=320px; src="https://img1.mashed.com/img/gallery/why-fountain-drinks-taste-different/intro-1588447053.jpg"></b>
</div>
<!--2nd Menu Item-->
<div>
<h3>Iced Tea, Tea, & Coffee 2.95</h3>
<b>Pick your choice of cold or hot tea, any flavor, or coffee, made just the way you like it.
<img height=140.625px; width=250px; src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F12%2F2020%2F05%2F11%2Fcoffee-tea-GettyImages-930798200.jpg&q=85"></b>
</div>
<!--3rd Menu Item-->
<h1>Drinks only for Mom and Dad<br> (Valid ID must be presented to<br> waitor / waitress to show you<br> are older than 21)</h1>
<div>
<h3>Beer and Wine---------------5.99</h3>
<b>Choose your poison, but don't overdo it.
<!--Look I just copied the image link.-->
<img height=208px; width=282px; src="data:image/jpeg;base64,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"></b>
</div>
<!--Link back to menu homepage-->
</body>
</html>
How are you doing?
First, thank you for trying to help, I know this question is silly but I couldn't find an answer nor understand why it is not working as expected.
I have the following tree on my machine:
projectFolder
|__ website
|__index.html
For this website, I'm using Bootstrap 4, but I needed to use glyphicons from Bootstrap 3, so I saved the glyphicons part from Bootstrap 3 in a .css file called glyphicons.css. I then uploaded this file to GitHub, which raw version is available here.
When I tried using it in index.html, using the following line to import it, it didn't work.
<link rel="stylesheet" href="https://raw.githubusercontent.com/feRpicoral/GlyphiconsBootstrap4/master/glyphicons.css" type="text/css">
Nevertheless, when I download the file and added it to projectFolder, resulting in the following path, it worked fine, so the problem is not in the .css file.
projectFolder/glyphicons.css
To import the file I was using the same <link> as above but with "../glyphicons.css" as href.
Long story short, when importing a stylesheet hosted on GitHub using the raw link of the file, it does not work.
Am I doing something wrong?
Below you can see the relevant part of the glyphicon.css file and the code that I'm using in index.html. Feel free to run the snippet and understand better what I mean.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-picture:before {
content: "\e060";
}
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Glyphicons File -->
<!--<link rel="stylesheet" href="../glyphicons.css" type="text/css"> WORKS (COMMENTED TO USE WITH STACKOVERFLOW SNIPPET)-->
<!-- <link rel="stylesheet" href="https://raw.githubusercontent.com/feRpicoral/GlyphiconsBootstrap4/master/glyphicons.css" type="text/css"> DOESN'T WORK-->
<title>Glyphicons Test</title>
</head>
<body>
<style type="text/css">
div {
font-size: 100px;
margin: 100px auto;
}
#text {
font-size: 20px;
display: block;
}
</style>
<div class="container bg-dark text-center text-white">
<span class="glyphicon glyphicon-picture"></span>
<span id="text">Icon is above if working</span>
</div>
</body>
</html>
Thanks in advance,
Fernando
Taking help from this post - and gitcdn you can create a link which you can refer to in your HTML... i removed the css code where you had loaded the glyphicons and now all glyphicons are loaded from your git link;
div {
font-size: 100px;
margin: 100px auto;
}
#text {
font-size: 20px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://gitcdn.link/repo/feRpicoral/GlyphiconsBootstrap4/master/glyphicons.css" />
<title>Glyphicons Test</title>
</head>
<body>
<div class="container bg-dark text-center text-white">
<span class="glyphicon glyphicon-picture"></span>
<span id="text">Icon is above if working</span>
</div>
</body>
</html>
I'm trying to expand the background image of the header to 100% of browser height but it doesn't work. The bg image is just a small bar although it is a big wallpaper, do you see my mistake?
<head>
<meta charset="UTF-8">
<title>TEXT</title>
<meta name="description" content="text">
<meta name="keywords" content="text" >
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<header>
<h1>TEXT <br> <span>TEXT</span></h1>
</header>
<section>
<article>
<p>TEXT</p>
<img src="images/spachtel1.jpg"><br>
<img src="images/spachtel1.jpg"><br><br>
</article>
</section>
<footer>
<h3>text<br>
</footer>
</body>
Here's the CSS file:
#font-face { /* ERSTENS LADE font family rein*/
font-family: 'alex_brushregular';
src: url('../css/alexbrush-regular-webfont.eot');
src: url('../css/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../css/alexbrush-regular-webfont.woff2') format('woff2'),
url('../css/alexbrush-regular-webfont.woff') format('woff'),
url('../css/alexbrush-regular-webfont.ttf') format('truetype'),
url('../css/alexbrush-regular-webfont.svg#alex_brushregular') format('svg');
font-weight: normal;
font-style: normal;
}
html {
font-size: 1rem;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
h1 { /
font-family: 'alex_brushregular', 'sans-serif';
}
section p {
font-weight: 100;
font-size: 1.13rem;
font-style: italic;
}
span.by {
color: red;
}
section a {
color: #eda318;
text-decoration: none;
font-style: normal;
}
section a:hover {
text-decoration: underline;
}
header {
background-image: url('../images/bgheader1.jpg');
background-position: 50% 50%;
background-size: cover;
}
I think this is because your background image is set only to affect your header. Try making it affect your body.
Try adding the background image styling to the <BODY> tag instead of the <HEADER> tag like this:
body {
background-image: url('http://lorempixel.com/400/200/nature/');
background-position: 50% 50%;
background-size: cover;
}
I solved it:
I had to write
height: 100%;
to the header of the CSS file.
I'd like to change the font-family used by Jquery UI to web font using #fontface. I have created my own css file, named my.css and I supplied it with the follwoing CSS:
#font-face {
font-family: "Conv_mry_KacstQurn";
src: url('fonts/mry_KacstQurn.eot#iefix') format('embedded-opentype'),
url('fonts/mry_KacstQurn.woff') format('woff'), url('fonts/mry_KacstQurn.ttf') format('truetype'), url('fonts/mry_KacstQurn.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body *{
font-family: "Conv_mry_KacstQurn";
}
The code of my page header section is as the follwoing:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/my.css" rel="stylesheet" />
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript">
/* initiation of UI code */
</script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Conv_mry_KacstQurn", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
Using body * in my.css makes everything well and the web font is rendered in the Jquery UI elements as well. The problem is when I want to use multiple font families in the page. So I want to know how to set a web font to be used with Jquery UI elements without using body * selector?
Thank you for all viewer, I had find the answer. Simply, it includes to replace the order of the two linked css files to be:
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
<link type="text/css" href="css/my.css" rel="stylesheet" />
Then copying the follwoing CSS rules from css/custom-theme/jquery-ui-1.8.22.custom.css and then pasting them in my.css with adding the font-family I want to the font-family properties found there:
* Component containers
----------------------------------*/
.ui-widget { font-family: "Conv_mry_KacstQurn",Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: "Conv_mry_KacstQurn",Verdana,Arial,sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #a6c9e2; background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #4297d7; background: #2191c0 url(images/ui-bg_highlight-hard_75_2191c0_1x100.png) 50% 50% repeat-x; color: #eaf5f7; font-weight: bold; }
.ui-widget-header a { color: #eaf5f7; }
That's all, and now all Jquery elements have the font-family that I want.