I've been trying to change my fonts with Google Fonts in my HTML / CSS, but it keeps on remaining at its default font. I've googled everywhere and still the same. Could there be something wrong with my code?
My html code:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<script src="myscripts.js">
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script type="script/script.js">
</script>
<title>The Story Maker</title>
</head>
<body>
<h1>The Story Maker</h1>
<p>Fabricate a comical, romantic, jovial, or even petrifying story with this story maker! Let your imagination and creativity loose!</p>
<div class="navigation">
<nav>
<ul>
<li>Home</li>
<li>Create A Story</li>
<li>About Us</li>
<li>Donate</li>
</ul>
</nav>
</div>
<div id="showContainer">
<div class="imageContainer" id="img_1">
<img src="https://s3-ap-northeast-1.amazonaws.com/pro-ww-wordpress/libre/uploads/sites/2/2018/03/08091927/Disney-Meet-80cr.jpg">
<div class="caption">
The Tale of the Snow White
</div>
</div>
<div class="imageContainer" id="img_2">
<img src="https://66.media.tumblr.com/51c436b44f5ec312055a7ed22cc6dd2b/tumblr_osyb8fvLA81thrhjso1_400.jpg">
<div class="caption">
The Horror Tale of the Dolls
</div>
</div>
<div class="imageContainer" id="img_3">
<img src="https://66.media.tumblr.com/4dca7a847bd3fe0dae5bcfefddf850fb/tumblr_phrz8lNkHI1qcpptho1_640.jpg">
<div class="caption">
The Romantic Tale of Sara and John
</div>
<div class="imageContainer" id="img_3">
<img src="https://i.pinimg.com/originals/1c/f5/a0/1cf5a0e20fdd174956031fff77376f17.jpg">
<div class="caption">
The Adventures of Felicity
</div>
</div>
<div class="navButton" id="previous">❮</div>
<div class="navButton" id="next">❯</div>
</body>
</html>
My css code:
h1 {
font-family: 'Oswald', sans-serif;
}
I even tried using a font like Arial and nothing happens. No change in the output.
Try it internally, maybe?
<style>
h1 {
font-family: 'Oswald', sans-serif;
}
</style>
Or check if you named your css file styles.css?
Your code is fine, this must be a problem with your browser. These are the browsers that support Google Fonts API:
Google Chrome - version 4.249.4+
Mozilla Firefox - version: 3.5+
Apple Safari - version 3.1+
Opera - version 10.5+
Microsoft Internet Explorer - version 6+
Related
When i run the website on Android or Windows the text renders normally and everything works super smooth but when I run the website on iOS the text is just gone. Like it never existed. All other elements tuck in. It is almost as if all text has display: none;
not working on iOS
working on Android
Here is my html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="normalStylesheet" rel="stylesheet" href="style.css">
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<title>Tungstun Design and ICT</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="main_section">
<div class="header"
data-aos="header-scroll"
data-aos-offset="100"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchorPlacement="top-bottom"
data-aos-anchor=".work_content"
data-aos-easing="ease-in-out">
<ul id="header">
<li id="homeButton" class="headerItem"><a>Home</a></li>
<li id="workButton" class="headerItem"><a>Work</a></li>
<li id="contactButton" class="headerItem"><a>Contact</a></li>
</ul>
<img class="header_logo" src="images/logo#2x.png">
</div>
<div id="homeSection" class="logo_container">
<img class="logo" src="images/logo#2x.png">
</div>
<div class="buttons_container">
<button id="workMainButton" class="button primary_button">Work</button>
<button id="contactMainButton" class="button secondary_button">Contact</button>
</div>
<div class="image_div">
<img src="images/bgovals#2x.png" id="bgOvals">
</div>
<div class="circle_div"
data-aos="tagline-scroll"
data-aos-offset="100"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchorPlacement="top-bottom"
data-aos-anchor=".work_content"
data-aos-easing="ease-in-out">
<img src="images/bgcircle#2x.png" id="bgCircle">
<h1 id="tagLine">A small IT and design company based in Utrecht</h1>
</div>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<div id="workSection" class="work_content">
<h1 class="title">My work</h1>
<ul id="workList" class="work_list">
<li>
<div class="work_li_div">
<img src="images/amblogo.png" class="work_image">
<div class="work_name_div">Alles met boeken</div>
</div>
</li>
<li>
<div class="work_li_div">
<img src="images/Herfst.png" class="work_image">
<div class="work_name_div">VanGister</div>
</div>
</li>
<li>
<div class="work_li_div">
<img src="images/logo-transparent#2x.png" class="work_image">
<div class="work_name_div">Heimstel</div>
</div>
</li>
</ul>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<div id="contactSection" class="contact_content">
<h1 class="title">Contact me</h1>
<h2>Let's make something great together!</h2>
<div class="form_div">
<form>
<label for="formName">Your name</label><br>
<input id="formName" type="text"><br>
<label for="formEmail">Your e-mail</label><br>
<input id="formEmail" type="email"><br>
<label for="formType">What can I do for you?</label><br>
<select id="formType"></select><br>
<form action="formMessage">Anything to add?</form>
<textarea id="formMessage" type="text"></textarea><br>
<button id="formConfirmButton" type="button">Shoot!</button>
</form>
</div>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<script src="work.js" type="text/javascript"></script>
<script>
AOS.init();
</script>
</body>
</html>
And here my css
#font-face {
font-family: gotham_medium;
src: url(font/GothamMedium.svg);
src: url(font/GothamMedium.ttf);
}
#font-face {
font-family: gotham_book;
src: url(font/GothamBook.svg);
src: url(font/GothamBook.ttf);
}
html, body {
background-color: var(--tungstun-background);
margin: 0px;
font-family: 'gotham_medium', 'Open Sans', sans-serif;;
text-rendering: optimizeLegibility;
}
Your implementation is correct, but the .ttf file is corrupted. Chrome is more forgiving than safari, but you can see that the font behaves weird on chrome, too (compare the two pictures using your font and the browser default font)
Load the font from a trusted source and if you refactored that font using an online service, try another one. The website itself works, you can test it by changing the font.
This question already has answers here:
How to add a color overlay to a background image? [duplicate]
(4 answers)
Closed 2 years ago.
Please if i shouldn´t be posting this here can someone advise me where to post this instead?
TL;DR = Need my showcase image background to darken up!
I'm creating this website with new stuff i am learning in my online course to practice, and this will be the template where i will keep adding things.
I've had this before but i had to re-do this and can´t seem to make it work now.
My background used to be darker, i managed to this using a background image on a class, and then i also had somewhere in my style background rgba(0,0,0,0.5) which would darken my background and allow the text to be read perfectly.
Now whenever i try to do this i can't seem to make it work, i've tried using the before or after properties, using the rgba on a whole different div in the html but cant seem to do this?
background image link: https://postimg.cc/ZvSmDbgD
fiddle link: https://jsfiddle.net/Nuno11/Luhmernp/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="/css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="/css/widescreen.css">
<title>Home</title>
</head>
<body id="home">
<!-- navbar -->
<div id="navbar-container">
<nav id="navbar">
<a href="#home">
<h3>
<span class="textPrimary">Pro</span>cessing...
</h3>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Challenges <i class="fas fa-arrow-down"></i></li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- Header: Showcase -->
<div id="showcase-container">
<header id="showcase">
<div class="showcase-content">
<h1 class="p2">
<span class=textPrimary>Pro</span>cessing...
</h1>
<p class="p1">
Space for creative learning, self-improving and testing.
</p>
<p class="p1">
Building the blocks of a web developer.
</p>
Find Out More
</div>
</header>
</div>
<div id="footer-container">
<footer id="footer">
<p>
Copyright © Processing... 2020, All Rights Reserved.
</p>
</div>
</footer>
</div>
<script src="https://kit.fontawesome.com/9751c7be27.js" crossorigin="anonymous"></script>
<script src="java.js"></script>
</body>
</html>
Many thanks all
Nuno
You can use a css trick :
background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
url('https://i.postimg.cc/kGV5GDy9/gray-metal-cubes-decorative-1005644.jpg');
Js fiddle: https://jsfiddle.net/hansfelix50/9hw2o5kp/
The html file is not linking to the css file. Both the files are placed side by side in the same directory. It used to work fine before but suddenly it doesn't work. I have tried everything that was mentioned in the answers to similar questions here in StackOverflow but still doesn't work.
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="part1">
<p>Reliable, efficient delivery</p>
<h2>Powered by Technology</h2>
<p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful.</p>
</div>
<div class="part2">
<div class="supervisor">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblock.</p>
</div>
<div class="wrapper">
<div class="teambuilder">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal team for your project.</p>
</div>
<div class="karma">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality.</p>
</div>
</div>
<div class="calculator">
<h3>Calculator</h3>
<p> Uses data from past projects to provide better delivery estimates.</p>
</div>
</div>
</div>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</p>
</footer>
</body>
</html>
Css code:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: hsl(0, 0%, 98%);
text-rendering: optimizeLegibility;
}
.container {
width: 60%;
height: 60%;
}
For the folder structure please refer to this
https://github.com/swethalakshmi22/four-card-feature-section
The code you have uploaded on Github it has href="/style.css" please write
here your code in the question is fine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="part1">
<p>Reliable, efficient delivery</p>
<h2>Powered by Technology</h2>
<p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful.</p>
</div>
<div class="part2">
<div class="supervisor">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblock.</p>
</div>
<div class="wrapper">
<div class="teambuilder">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal team for your project.</p>
</div>
<div class="karma">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality.</p>
</div>
</div>
<div class="calculator">
<h3>Calculator</h3>
<p> Uses data from past projects to provide better delivery estimates.</p>
</div>
</div>
</div>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</p>
</footer>
</body>
</html>
After checking your code-snippet , it seems that either css style.css is not on the same location where your html file is. Please check that.
Can you please check the right on the folder (IIS_USER) must have permission on this to read the style.css ?
I am using materialize framework and as I add <!DOCTYPE html> it does not recognize my CSS. But it works without <!DOCTYPE html>. How should I solve this error?
Update :
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Material</title>
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script>
$( document ).ready(function(){
$(".button-collapse").sideNav();
});
</script>
<style>
body{background-color:#fcfcfc;}
.logo{
height:70%;
margin-top:10px;
margin-left:10px;
}
#media only screen and (max-width: 992px){
.logo{
margin-left:0px;
}
}
.button-collapse{
margin-left:5px;
}
</style>
</head>
<body>
<div class="navbar-fixed">
<nav class="blue lighten-1">
<div class="nav-wrapper">
<img src="images/logo.png" class="logo" />
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>Login</li>
<li>Signup</li>
<li>Contact Us</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Home</li>
<li>Login</li>
<li>Signup</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
<div class="row header-img">
</div>
</body>
</html>
The reason is that browsers switch to a more correct rendering engine mode when they see a doctype in the file.
If adding a doctype is causing problems, then your code has probably something wrong with it, and it is working by chance (or trial and error) if nothing else. There is a slight chance that the culprit might be a bug introduced in the more standards-compliant rendering mode, though. Such bugs do exist.
Without the doctype your page will be renderd in quirks mode. That means that the browser will treat your html AND your css after the rules the older browsers have set.
Valid html MUST have a doctype. If you have a correct and fairly new doctype then your document will be rendered in Standards Compliant mode. Also, your stylesheets must have a media type of text/css.
I think sharing your CSS here might help in identifying what exactly is going wrong.
On the bottom of my website, BJBGaming1.com, there is a weird white bar, please help me get rid of it. and my coding is
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BJBGaming1</title>
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li>Home</li>
<li>Minecraft</li>
<li>CS:GO</li>
<li>Smite</li>
</ul>
</div>
</div>
<div class="callout large primary">
<div class="row column text-center">
<h1 style="color:green">BJBGaming1</h1>
<h2 class="subheader">Happy Thanksgiving!</h2>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Minecraft <small>11/25/2015</small></h3>
<img class="thumbnail" src="Minecraft.png">
<p style="color:white">Minecraft is a very popular game, on PC, Xbox, and Smart Phones, played by millions of people every day. For more information go to www.bjbgaming1.com/minecraft</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>CS:GO <small>11/25/2015</small></h3>
<img class="thumbnail" src="CS.GO.png">
<p style="color:white">CS:GO stand for, Counter-Strike: Global Offensive, and is a FPS game that is assosiated with E-Sports, and played by millions of people everyday. For more information go to www.bjbgaming1.com/cs_go</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Smite <small>11/25/2015</small></h3>
<img class="thumbnail" src="Smite.png">
<p style="color:white">Smite is a game just like LoL (League of Legends). In Smite you can pick from over 50 gods that ou unlock with Favor, favor is basically the currency to buy gods, but in Smite there are tons of different game modes, and every day they feature a community made gamemode. Also, Smite is always coming out with new gamemodes to try. For more information go to www.bjbgaming1.com/smite</p>
</ul>
</div>
</div>
</div>
<!-- begin wwww.htmlcommentbox.com -->
<div style="color:white" id="HCB_comment_box">Comment Form is loading comments... </div>
<link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
<script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user) {hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttri bute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24nHgonDoa 62nAhjUsN9BAt%2F"+"&opts=16862&num=10&ts=1448559904895");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end www.htmlcommentbox.com -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script>
<script>
$(document).foundation();
</script>
</body>
</html>
Im probably missing some code so its probably best that you look at it from bjbgaming1.com
Add background color to the "body" tag of this website by using CSS:
body {
background-color: #000;
}
The bottom of your background image is black so add black background to 'extend' the background image.