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.
Related
If I add this CSS to the bottom of a page:
<style>
a:link {
font-weight: bold;
}
a:visited {
font-weight: normal;
}
</style>
I would expect it to make unvisited links (only) bold. But it's not.
Am I misunderstanding the purpose/use of these pseudo-classes?
Here's a full page example:
<!DOCTYPE html >
<html>
<head>
<style>
body {
font-size: 16pt;
}
a:link {
font-weight: bold;
}
a:visited {
font-weight: normal;
}
</style>
</head>
<body>
This link should not be bold
</body>
</html>
Making text bold changes its size. This moves everything around the page.
If you could stop links being bold when they became visited you could use JavaScript to measure their size or the position of things near them and determine if the user has visited that link or not.
This is an invasion of privacy (and has security implications as it could be used to tailor phishing attacks) and so it is forbidden.
See Privacy and the :visited selector.
I'm using a custom font for Shopify which I've added to my css file. I used another font on this site as well and every place that I've inserted this font has worked just fine on desktop and mobile. The only place I want to use this second font (Arial Black) is in the section header.
I inserted this in my CSS but it doesn't appear on mobile, only on desktop:
#font-face {
font-family: 'Arial Black', sans-serif;
src: url({{'Arial_Black.ttf'| asset_url }});
url({{'Arial-Black.woff'| asset_url }});
url({{'Arial-Black.woff2'| asset_url }});
url({{'Arial_Black.otf'| asset_url }});
font-weight: normal;
.section-header h2 {
font-family: "Arial Black", sans-serif !important;
font-weight: 900 !important;
font-size: 30px ;
}
Any idea on how I can make this font work for just this one section of my site for mobile?
Is that path for the font right? I would try using an absolute path just in case. If you aren't sure of the path check another pages' sources tab in the developer tools (one where it is working) and you'll find the path.
Edit:
Just checked, when in mobile there's a style rule that sets the headers to
.h1, .h2, h1, h2 {
margin: 0 0 17.5px;
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
line-height: 1.2;
overflow-wrap: break-word;
word-wrap: break-word;
}
you need to add the following to your css to override this (I'm applying it only to h2 but if you want you can add h1):
h2, .h2 {
font-family: 'Arial Black', Gadget, sans-serif !important;
}
This should fix it
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%;
}
At the end of my tether with this one.
My website: timjstevenson.com
Renders on everything except windows phone. No errors.
I am using the recommended head function
if (navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(document.createTextNode("#-ms-viewport{width:auto!important}"));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
And the recommended viewport metas
<meta name="viewport" content = "user-scalable=yes, maximum-scale=1, width=device-width /">
And the recommended CSS elements
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
but the site still renders at full size and doesn't handle the fixed / relative elements properly.
I have done a lot of research on this and read all the relevant blogs / forums.
The top of my CSS looks like this...
html
{-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-font-smoothing:antialiased;}
body
{max-width:768px; min-height:1028px;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;}
#font-face {font-family: HelveticaNeue;
src:url(fonts/HelveticaNeueLTStd-Lt.otf);}
#font-face {font-family: FuturaStd;
src:url(fonts/FuturaStd-Book.otf);}
div, span
{font-family: HelveticaNeue, Arial, sans-serif;
font-size:120%;
font-weight:normal;
text-align:justify;
color:#202020;}
div.sitepage
{position:relative;
width:700px;
min-height:900px;
top:180px;
margin-left: auto;
margin-right: auto;
padding: 5px 10px 5px 10px;
z-index:1;}
And the top of the html looks like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content = "width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="apple-touch-icon" href="images/tjs_logo.png"/>
And I have read these but no luck...
http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
stackoverflow.com/questions/14654425
IMPORTANT EDIT: The issue appears to be with position:fixed DIVs. These DIV elements do not scale under windows phone IE.
SOLVED.
The problem is with Position Fixed DIVs with a specified width in pixels.
If the viewport is being controlled by media queries (specifically for WinPhone 7/8) then specifying a width greater then the screen width in a fixed div causes the problem.
Here is the start of my altered CSS - note the div.header and div.site entries. NO SPECIFIED WIDTH - just 100% inherited from body with a max-width thrown in.
body
{width:100%;
max-width:768px;
min-height:1028px;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;}
#font-face {font-family: HelveticaNeue;
src:url(fonts/HelveticaNeueLTStd-Lt.otf);}
#font-face {font-family: FuturaStd;
src:url(fonts/FuturaStd-Book.otf);}
div, span
{font-family: HelveticaNeue, Arial, sans-serif;
font-size:120%;
font-weight:normal;
text-align:justify;
color:#202020;}
div.site
{max-width:768px;
min-height:1028px;
margin-left:auto;
margin-right:auto;}
div.header
{position:fixed;
z-index:5;}
And Here are the media and viewport elements I used.
#media screen and (max-device-width: 25em)
{body
{-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
-text-size-adjust: none;}}
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
And here is the head viewport meta tag in the html
<meta name="viewport" content = "width=device-width, maximum-scale=1.0"/>
Hope this helps.
T.
I have a problem with positioning a text with an image using CSS. It works good in Firefox and IE but not in Safari. The image is placed left of the text and I want the text to be in the center of the image in vertical positioning. I'm using a custom font (MyriadProLight), using font-face.
This is how it looks in Safari:
http://oi52.tinypic.com/2eg5p8x.jpg
This is how I want it (and how it looks in Firefox and IE):
http://oi54.tinypic.com/1zg3xhx.jpg
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Title</title>
<style>
#font-face {
font-family: 'MyriadProLight';
src: url('myriadpro-light-webfont.eot');
src: local('☺'), url('myriadpro-light-webfont.woff') format('woff'), url('myriadpro-light-webfont.ttf') format('truetype'), url('myriadpro-light-webfont.svg#webfontpR0gSEvM') format('svg');
font-weight: normal;
font-style: normal;
}
h1
{
font-size: 20pt;
font-family: "MyriadProLight", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
color: #333;
text-transform:uppercase;
line-height: 21pt;
font-weight: normal;
letter-spacing: 0px;
margin: 0px 0px 10px 0px;
padding: 0px;
}
.iconimage
{
margin-right: 7px;
vertical-align: middle;
}
</style>
</head>
<body>
<h1><img class="iconimage" src="image.png" />This is the header</h1>
</body>
</html>
Not sure this adds anything, but if you view your page in Firefox and then use firebug to hunt down the element, you may notice that an #font-face web fonts are not lined up vertically in the centre of their line-heights. I don't know enough about fonts to know whether this is a font-file issue, but I did all my generation with font-squirrel, which people seem to think is the most reliable option.
WORKAROUNDS
My font ('Destroy') was lined up very heavily toward the bottom. So if I didn't include enough space for it, it looked chopped off at the bottom. Two solutions worked:
If your element is non-breaking: Make the line-height double the font-size.
If your element breaks: add padding to the bottom of the element equal to or slightly less than the font-size.
Obviously (or maybe not so, sorry), I'm dealing with headers and such. I have no idea if these would work with paragraphs or other multi-lined elements.
Positioning images inline with text is a messy business. I would move the image outside of your h1 tag and float it left, then tweak placement with margins. Something like this:
<img class="iconimage" src="mail.png" style="float:left; margin:10px" />
<h1>This is the header</h1>
Maybe it would be best to remove the img tag and do it in CSS alone:
h1 {
padding: 0 0 0 30px;
background: url(image.png) no-repeat left;
}