I had gotten help from a friend since I had started crying since I am still new and learning CSS for a class in college.
We got to a certain point about three questions to the last step but the font for the headlines/titles for the playbills doesn't completely work. The one for Othello (play 3) worked completely, "The merry wives of Windsor" and " the importance of being Earnest" semi-works to where it started but didn't finish (play 1 and play 4). " A Streetcar named Desire" (play 2) does not work at all. Below is the coding for the title of each play:
#play1 {
background-color: hsl(240, 100%, 88%);
}
#play1 > h1 {
font-family: Champagne, cursive;
}
#play2 {
background-color: hsl(25,88%,73%);
}
#play2 > h1 {
font-family: Grunge, "Times New Roman", Times, serif;
}
#play3 {
background-color: hsl(0, 100%, 75%);
}
#play3 > h1 {
font-family: Impact, Charcoal, sans-serif;
}
#play4 {
background-color: hsl(296, 86%, 86%);
}
#play4 > h1 {
font-family: Dobkin, cursive;
}
If you have any idea or any possible changes we can make to make it work, please let me know. Thanks!
edit: this is the HTML code, I deleted the paragraphs and any words in a Notepad to be more focused on the question.
Edit 2: I thought when asking about the HTML code, I thought it was the actual Html coding, but the assignment solely focuses on the stylesheet.
the stylesheet coding
#charset "utf-8";
#font-face {
font-family: "font name";
src: url('cac_champagne.woff') format('woff'),
url('cac_champagne.tff') format('truetype');
}
#font-face {
font-family: "font name";
src: url('1942.woff') format('woff'),
url('1942.tff') format('truetype');
}
#font-face {
font-family: "font name";
src: url('dobkinplain.woff') format('woff')
url('dobkinplain.tff') format('truetype');
}
/*
New Perspectives on HTML5 and CSS3, 8th Edition
Tutorial 2
Case Problem 1
PHCT Typographic Style Sheet
Filename: ph_styles.css
*/
/* I have no idea what I am doing. */
/* Structural Styles */
html {
background-color: hsl(91, 8%, 56%);
}
body {
background-color: hsl(58, 31%, 84%)
font-family: 'Palantino Linotype', 'Book Antiqua', Palatino, serif;
}
h1{
color: black;
}
section > p{
margin: 0px;
padding-top: 5px;
padding-right: 25px;
padding-left: 25px;
padding-bottom: 25px;
}
section > aside{
font-size: 1.1em;
text-align: center;
}
section > nav{
font-size: 0.9em;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
/* Navigation Styles */
nav > ul > li > a{
font-family: 'Trebuchet MS', Helvetica, sans-serif;
padding-top: 10px;
padding-bottom: 10px;
}
nav > ul > li > a:link, a:visited{
color: white;
text-decoration: none;
background-color: hsla(0, 0%, 42%, 0.4);
}
nav > ul > li > a:hover, a:active{
color: hsla(0, 0%, 100%, 0.7);
background-color: hsl(0, 0%, 42%, 0.7);
}
/* Section Styles */
section.playbill h1{
font-size: 3em;
font-weight: normal;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 20px;
}
#play1{
background-color: hsl(240, 100%, 88%);
}
#play1 > h1{
font-family: Champagne, cursive;
}
#play2{
background-color: hsl(25,88%,73%);
}
#play2 > h1{
font-family: Grunge, "Times New Roman", Times, serif;
}
#play3{
background-color: hsl(0, 100%, 75%);
}
#play3 h1{
font-family: Impact, Charcoal, sans-serif;
}
#play4{
background-color: hsl(296, 86%, 86%);
}
#play4 > h1{
font-family: Dobkin, cursive;
}
/* Description List Styles */
font-style: normal;
margin: 0px, 5 px, 25px
text-align: center;
<!DOCTYPE html>
<html>
<head>
<style>
#play1 {
background-color: hsl(240, 100%, 88%);
}
#play1 > h1 {
font-family: Champagne, cursive;
}
#play2 {
background-color: hsl(25,88%,73%);
}
#play2 > h1 {
font-family: Grunge, "Times New Roman", Times, serif;
}
#play3 {
background-color: hsl(0, 100%, 75%);
}
#play3 > h1 {
font-family: Impact, Charcoal, sans-serif;
}
#play4 {
background-color: hsl(296, 86%, 86%);
}
#play4 > h1 {
font-family: Dobkin, cursive;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<div id="play1"><h1>This is a paragraph, shown in the Champagne cursive..</h1></div>
<div id="play2"><h1>This is a paragraph, shown in the Grunge New Times.</h1></div>
<div id="play3"><h1>This is a paragraph, shown in the Impact Charcoal</h1></div>
<div id="play4"><h1>This is a paragraph, shown in the Dobkin cursive</h1></div>
</body>
</html>
So I looked at your CSS it seems correct so we need to check the html of what you used.
this.shadowRoot.innerHTML = `
<style>
#font-face {
font-family: SpaceGrotesk;
src: url(/fonts/SpaceGrotesk-Medium.ttf);
}
#font-face {
font-family: SpaceGroteskLight;
src: url(/fonts/SpaceGrotesk-Light.ttf);
}
* {
box-sizing: border-box;
}
.tipme {
position: relative;
font-size: 1.4rem;
font-family: SpaceGrotesk, sans-serif;
text-align: center;
background-color: #fff;
padding: 4rem 1.4rem 1.4rem;
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.08);
margin: 5rem 1.4rem 1.4rem;
width: 50rem;
}
h1 {
font-family: SpaceGroteskLight, sans-serif;
font-weight: 400;
font-size: 2.6rem;
margin: 1rem;
}
`;
...
The browser is not requesting the the font files.
I tried in incognito mode so its not a cache issue.
This is a distributed component running on multiple sites, so I cannot just load the font in the parent html. It needs to be encapsulated.
I ended up just dynamically adding style loading fonts to parent page:
this.fonts = `
#font-face {
font-family: SpaceGrotesk;
src: url(${this.host}/fonts/SpaceGrotesk-Medium.ttf);
}
#font-face {
font-family: SpaceGroteskLight;
src: url(${this.host}/fonts/SpaceGrotesk-Light.ttf);
}
`;
const style = document.querySelector('style[data-description="tipme-fonts"]');
if (!style) {
const el = document.createElement('style');
el.dataset.description = 'tipme-fonts';
el.appendChild(document.createTextNode(this.fonts));
document.head.appendChild(el);
}
I have a basic HTML/CSS website for fun and put a custom font on it. The problem is that when ever I click on a link on my sidebar the custom font changes to a standard font, and won't revert to the custom font unless I close the tab and re-open it. How can I get it to stay?
CSS:
#font-face {
font-family: 'VHS';
src: url('http://hashfastr.com/fonts/VHS.ttf');
}
body {
background-color: black;
}
.upper {
font-family: 'VHS';
font-size: 400%;
color: white;
}
.lower {
font-family: 'VHS';
font-size: 300%;
color: white;
}
.mini {
font-family: 'VHS';
font-size: 150%;
color: white;
}
.list {
font-family: 'VHS';
font-size: 100%;
color: white;
}
The website is here
Edit: The problem does not work on mobile, only chrome and firefox. I assume this is due to a caching error?
I'm building a basic website and I've gotten pretty far, but I have stumbled upon a problem: I want all of my headings to be in the font "Arvo", but for some reason, only the index page has Arvo in the heading. Since all of my pages are linked to the stylesheet I should be able to change every h1 to this font.
Here's what my style sheet looks like, there's probably some unnecessary code in there, but I'm a total beginner.
body {
background: url("https://www.xmple.com/wallpaper/streaks-lines-red-stripes-1920x1080-c4-7f2a33-972c36-b02c39-cb2b3b-l4-45-72-116-187-a-135-f-1.svg") center center repeat;
margin: 0;
padding: 0;
background-attachment: fixed;
}
#wrap {
width: 54%;
margin: auto;
background: #fff2f9;
overflow: hidden;
padding: 15px;
}
div {
width: 300px;
height: 2000px;
background-color: white;
box-shadow: inset 0 100px 100px #ffffff, 0 10px 15px #000;
}
p {
color: black;
}
h1 {
font-family: 'Arvo', Georgia, Times, serif;
font-size: 59px;
line-height: 70px;
}
p {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 25px;
}
b {
font-family: "verdana", sans-serif; color: gold;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
a {
font-family: "verdana", sans-serif;
color: black /* unvisited link */
}
/* visited link */
a:visited {
color: black;
}
/* mouse over link */
a:hover {
color: gold;
}
/* selected link */
a:active {
color: black;
}
}
What else do I need to do for the font to change on all of my HTML pages?
Maybe the style is override, therefore use !important to fix it.
Use the following CSS for all headings:
h1, h2, h3, h4, h5, h6 {
font-family: Arvo, Georgia, Times, serif !important;
font-size: 59px;
line-height: 70px;
}
If you want to apply it only for h1 then remove the rest of headings. In the question you said "all headings", therefore, I added the all heading levels.
Update:
Try linking the font with your page, put the following inside head element:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Arvo" />
Or
Import the font. Put the following line in the very begining of your CSS:
#import url('href="//fonts.googleapis.com/css?family=Arvo');
The body of my CSS has a font style set using CSS, but it is not showing in the table. I then added it into the table and it still seems to not want to adopt the font style.
I had a look through some other posts and am still struggling.
CSS:
body {
font-family: 'Indie Flower', cursive;
background-image: url('../images/Landscape.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
min-width: 100%;
min-height: 100%;
}
table, th, td {
font-family: 'Indie Flower', cursive;
}
table {
margin-top: -446px;
margin-right: 428px;
z-index: 1;
position: absolute, center;
background-color: #F0F0F0;
border: 3px solid #FFF;
}
th {
text-align: left;
z-index: 3;
}
td {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 5px;
z-index: 2;
background-color: #F0F0F0;
}
Ok so your issue here is that the font is needed for the placeholders, not the table or inputs themselves.
::-webkit-input-placeholder {
font-family: 'Indie Flower', cursive;
}
:-moz-placeholder { /* Firefox 18- */
font-family: 'Indie Flower', cursive;
}
::-moz-placeholder { /* Firefox 19+ */
font-family: 'Indie Flower', cursive;
}
:-ms-input-placeholder {
font-family: 'Indie Flower', cursive;
}
Then for text that is entered into the inputs, just add the style to the input itself.
input {
font-family: 'Indie Flower', cursive;
}
Worth noting that you can also use font-family: inherit; instead of explicitly declaring the font multiple times. This makes it much easier to update if you decide to change fonts.
Updated Fiddle
You have to put the font-family inside your input like this :
input{
font-family:inherit;
}
and if you want for the button too :
button{
font-family:inherit;
}
FIDDLE