I have followed the instructions on the google fonts website over an over and my webpage displays as it should on MY laptop, however, the fonts 'FJALLA ONE' does not load on any other computer or device.
Am I doing something wrong? Can I store the fonts in a folder and link them like a css file?
Here is my html - part 1:
head>
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
part 2:
<div class="box">
<h1 class="animated bounceInDown">SHEREE WALKER </h1> </div>
My CSS
.box h1 {
font-family:'FjallaOne', sans-serif; !important;
font-size:45px;
text-align:center;
color:#FFF;
padding-top: 10%; }
Am I missing something? Any help would be amazing. I'm at my wits end.
Your problem probably exists in this piece of code:
font-family:'FjallaOne', sans-serif; !important;
it should be
font-family:'Fjalla One', sans-serif !important;
OR
font-family:'Fjalla One', sans-serif;
If that still does not fix it try removing , sans-serif
Your problem is not with your code. It is fine. I would remove the !important though, it's not necessary and the syntax is also not correct, but the code will still work even with wrong syntax.
What your real problem is: the text is white so you will never see it on a white background. You can see it here working with red text-> http://jsfiddle.net/sxntrvrj/1/
h1 {
font-family: 'Fjalla One', sans-serif;
font-size:45px;
text-align:center;
color:red;
padding-top: 10%;
}
Related
I'm working on a site that needs full-page scroll-snaps for portfolio items. I got the snap-scroll and HTML smooth-scroll set up and working fine. I then added a link to a Google Font in HTML and set some text to that font in CSS. The font displayed as expected, but it seems to disable the scroll-snap behavior.
I've tried multiple Google fonts and have had the same result each time. It seems that it only disables scroll-snap when the font is correctly installed.
HTML...
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css">
CSS Below...
body{
scroll-snap-type: y mandatory;
color: #222;
}
.tech-list-header {
font-size: 1.333em;
font-family: 'IBM Plex Sans';
}
#bgimg-1, #bgimg-2, #bgimg-3, #bgimg-4, #bgimg-5 {
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
/* background-repeat: no-repeat; */
background-size: cover;
margin: 0px -10px;
position: relative;
min-height: 90vh;
scroll-snap-align: start;
scroll-snap-stop: normal;
}
It seems like I should be able to use Google Fonts and Scroll-Snap in tandem, but I can only get one working at a time... Any thoughts? Thanks!
There was a similar question with an answer here: https://stackoverflow.com/a/52886080/1173898
But, to expound on that - the root issue seems to be a conflict between scroll-snap-type and a #font-face declaration. When you link to Google Fonts, all you're linking to is a short CSS file that is composed of one or two #font-face declarations.
Specifically the issue is with a any #font-face declaration with a src: rule and a url(...) value. Which, unfortunately, is pretty much all of the time, and this includes Google Fonts stylesheets.
The other SO answer mentions that it’s Chrome only. However, I've seen the same broken behavior in Firefox.
The way around this, as alluded to in the other SO answer, is to add a wrapper element, inside the <body>, like so:
<body>
<div class="wrapper">
<div id="#bgimg-1">
<div id="#bgimg-2">
<div id="#bgimg-3">
</div>
</body>
CSS
.wrapper {
scroll-snap-type: y mandatory;
}
...
#bgimg-1, #bgimg-2, #bgimg-3, #bgimg-4, #bgimg-5 {
...
scroll-snap-align: start;
scroll-snap-stop: normal;
}
I'm new to CSS and am trying to use a class in my style.css that I created and want to use across a <div> ...
My CSS class:
.dave {
font-size: 56px;
text-transform: capitalize;
font-family: Arial, sans-serif;
font-weight: bold;
color:red
}
My HTML:
<div class="dave">
TEST
</div>
But my text "TEST" doesn't change. I've tried saving and clearing cache but no luck.
Any ideas?
Did you link user css style file in header?
Example:
<head>
<title>Ajax Chat</title>
<link rel="stylesheet" href="css/style.css">
</head>
Its either you didn't link your style.css to your HTML file, or it could be due to other errors such as, placing <style>....</style> in your style.css
I have read all relative answers on this site, as well as everywhere else on the www, but I still can't get my fonts to show up at all. Paths are right, files are in the right place, font squirrel example works...
This is on my PC, and everything else works (Paths, images, links...) according yo everything I have read and seen it should work, here is my code in the CSS file:
body {
background: url('mcontentback.jpg') repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin:0;
padding:0;
border:0;
width:100%;
height:100%;
min-width:497px;
text-align:center;
}
#font-face {
font-family: 'bahamasregular';
src: url('../fonts/bahamas-webfont.eot');
src: url('../fonts/bahamas-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bahamas-webfont.woff') format('woff'),
url('../fonts/bahamas-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-size:100%;
}
#font-face {
font-family: 'bahamaslightregular';
src: url('../fonts/bahamaslight-webfont.eot');
src: url('../fonts/bahamaslight-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bahamaslight-webfont.woff') format('woff'),
url('../fonts/bahamaslight-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-size:100%;
}
a {
color:#369;
}
a:hover {
color:#000;
background:#369;
text-decoration:underline;
}
h1, h2, h3 {
color:#000;
margin:.8em 0 .2em 0;
padding:0;
font-family: bahamasregular;
}
p {
color:#000;
margin:.4em 0 .8em 0;
padding:0;
font-family: bahamaslightregular;
}
.colmask {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}
.col1 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
.fullpage {
min-height:1200px;
}
.fullpage .col1 {
width:96%;
left:2%;
}
img {
max-width:100%;
}
Here is my HTML5:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
<title>Blaa blaa</title><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
<meta name="description" content="Blaa blaa">
<meta name="keywords" content="Blaa blaa">
<meta name="robots" content="index, follow">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../resourses/css/mcontent.css" media="screen"></head>
<body onload="parent.resizeIframe(document.body.scrollHeight)">
<div class="colmask fullpage">
<div class="col1">
<h1>Blaa blaa!</h1>
<p>Blaa blaa foo blah bla.</p>
<p>Blaa blaa foo blah bla!</p>
</div>
</div>
</body>
</html>
What on earth am I doing wrong? Tested in IE 11, Firefox 28 and Comodo Dragon (by Comodo) on windows7.
There too many brackets in your CSS code, which causes that the font-family isn't applied to any element or part of your webpage. And also, the quotes around the font-family are missing.
I think you should correct this part
h1, h2, h3 {
color:#000;
margin:.8em 0 .2em 0;
padding:0;
}
{
font-family: bahamasregular;
}
to this
h1, h2, h3 {
color:#000;
margin:.8em 0 .2em 0;
padding:0;
font-family: 'bahamasregular';
}
There's the same mistake in your CSS code for the p element
Check also this clear tutorial on #font-face for more info. Also, as Jukka pointed out, check if the font files are loading by using your browser's developer tools.
First, the problem was more than one problem: Why it did not work in IE is not 100% clear to me since I tried a few solutions before testing with IE, but MF82 pointed out something that may have solved it in IE. As for Firefox, it seems a lot of people have this problem. This pertains to a local PC, not a server! Here is what worked for me:
In Firefox Local documents have access to other local documents in the same directory and in sub directories, but not directory listings.
The setting "security.fileuri.strict_origin_policy" in Firefox's prefs.js file is responsible, read this: MozillaZene's description
As far as I can tell it is not entirely correct since moving the font files into the same directory as the css file, and changing the path statements in the css file appropriately still did not work, but changing the setting did solve the problem.
Here is how to change the setting "security.fileuri.strict_origin_policy": Editing prefs.js in Firefox Double clicking the setting will change its value from "False" to "True".
The drawback is that you open up Your filesystem to be traversed, so I recommended You reverse the process, once You know everything works, and only change the setting when You need to see the fonts and then change it back again. Maybe this will be fixed in a future version of Firefox.
I have used josefinsans webfont but the font is not looking smoother.It is looking rough and pixelated in all browsers.
I have tried by using both google web font as well as web font generated by using font generator and implemented it with #font-face.
Refer fiddle
Html:
<div>
<p>Coming Soon</p>
</div>
Css:
body{
background:#000;
color:#fff;
font-size:48px;
font-family: 'Josefin Sans', sans-serif;
}
Try with text-shadow: #fff 0px 1px 1px; ,
You can find more information here !
And this is How To Properly Smooth Font Using CSS3 !
I'm using mPDF with PHPExcel. I'm trying to configure layout with CSS. I can't get anything to work.
// this has no effect
$pdf->SetDefaultBodyCSS('color', '#ff0000');
I also try to use external style sheet:
// in php
$stylesheet = file_get_contents('pdf_styles.css');
$pdf->WriteHTML($stylesheet,1);
// in pdf_styles.css
body {
font-family: serif;
font-size: 5pt;
color: red;
}
Any help or hint would be highly appreciated!
I would suggest to put your CSS directly into your template, that works for me.
In you template add sth like this in the head part:
<html>
<head>
<style>
// all your styles come here
body {
font-family: serif;
font-size: 5pt;
color: red;
}
</style>
</head>
<body>
... all your other stuff comes here
</body>
</html>
you have to be very exact in your css usage.
for example does mpdf not accept this:
border-bottom: 1px #000000 solid;
this isnt prohibitted by browsers but mpdf needs this:
border-bottom: 1px solid #000000;
specfic informations can be found here:
http://www.plogin.net/mpdf/mpdf/docs/example_css.php
i use an external css file which i include like this into my template:
<link rel="stylesheet" href="css/pdf.css">
so there is no need to use any inline css.