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
Related
I can't get the font I am using to load in different weights.
I've tried loading in all the different weights from google fonts and both trying the #import within my css and the
In my css:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
* {
font-family: 'Open Sans', sans-serif;
}
.titles{
align-content:left;
font-weight:800;
}
In my html:
<div class="titles">
<h2> What we do.</h2>
</div>
Your 800 value is overruled by the default browser setting of 700 for h2 elements since you only applied it to .titles. You need to apply font-weight: 800 specifically to the h2 element.
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
* {
font-family: 'Open Sans', sans-serif;
}
.titles h2 {
align-content: left;
font-weight: 800;
}
<div class="titles">
<h2>What we do.</h2>
</div>
Use link in head tag of your html :)
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
Be careful so you don't split the import link into multiple rows and also check for spaces in the link. It should all be on one line. No spaces or breaklines.
#import should be used if you have different style sheets and you just need that import in a specific stylesheet. Or if you don't have access to edit the <head> element.
Else, you should use the html <link> element to include your fonts directly in the head element.
Check below
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
* {
font-family: 'Open Sans', sans-serif;
}
.titles {
align-content: left;
font-weight: 800;
}
<div class="titles">
<h2> What we do.</h2>
</div>
I am trying to use FontAwesome in the content of CSS.
It appears with the code for the icon instead of the icon. I have followed the online helps but still not working
css
#font-face {
font-family: 'FontAwesome';
src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css');
}
.fp-prev:before {
color:#fff;
content: '/f35a';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
If you are using the JS+SVG version Read this: Font Awesome 5 shows empty square when using the JS+SVG version
First, you only need to include the CSS file of Font Awesome 5 either in the head tag using:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
Or within the CSS file:
#import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")
Then you need to correct the font-family and the content like below:
#import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.fp-prev:before {
color:#000;
content: '\f35a'; /* You should use \ and not /*/
font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
font-style: normal;
font-weight: normal;
font-size:40px;
}
<i class="fp-prev"></i>
In some cases, you have to also add
font-weight:900
More detail here: Font Awesome 5 on pseudo elements shows square instead of icon
As a side note: Font Awesome 5 provide 4 different font-family for each pack of icons:
Font Awesome 5 Free for the free icons.
Font Awesome 5 Brands for the brand icons like Facebook, Twitter, etc.
#import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.fp-prev:before {
color: #000;
content: "\f099";
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
<i class="fp-prev"></i>
Font Awesome 5 Pro for the Font Awesome Pro.
Font Awesome 5 Duotone also included in the Pro package.
Related: Font Awesome 5 Choosing the correct font-family in pseudo-elements
Make your font-weight: 900;. I see you miss it
This is not showing because of color -issue . Please follow step :-
Step- 1. Copy this style in your page
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
Step- 2. copy this code at the top of your all.css in your page .
#import url("https://use.fontawesome.com/releases/v5.14.0/css/all.css");
Step- 3. Use the font-family and the content and color like
.password_invalid:before {
color: #ff0000;
content: '\f058'; /* You should use \ and not /*/
font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
position: relative;
margin-left: -36px;
padding-right: 13px;
font-weight: 400;
}
This Happened to me too. I had used this icon: as was using font awesome 5 cdn.
But when I tried to select the same class and then edit the icon, the css editing didn't run on the icon.
So the removed the "fas" from ".fas fa-plus-square" on the css selector and made it ".fa-plus-square{}".
So the CSS was like this (for me) : .fa-plus-square{
float: right;
} where i removed the "fas". And it worked for me.
where the Html class was <i class="fas fa-plus-square"></i>
And the cdn that I used: "https://use.fontawesome.com/releases/v5.0.7/css/all.css".
Hope this helps you
When you want to include FontAwesome the url you provided should be inside thehead tag as a stylesheet file:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
Then you can use Font Awesome as you have done.
I know I'm really late to answer this.
You have to include Fontawesome CSS in the header.
CDN -
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
If you have downloaded the source files then include as follows
<link rel="stylesheet" href="path-to-your-font-awesome-folder/css/all.min.css" />
Later you have to add the CSS as follows -
.fp-prev:before {
color:#000;
content: '\f35a'; /* replace / with \ */
font-family: "Font Awesome 5 Free"; /* here is the correct font-family */
font-style: normal;
font-weight: 900;
text-decoration: inherit;
}
if you wish to add it via <i> tag then you can follow
<i class="fas fa-arrow-alt-circle-right"></i>
Make sure your font weight is 900.
Refer - https://github.com/FortAwesome/Font-Awesome/issues/11946
An issue was raised in GitHub for the same. They have suggested that for the solid font awesome icons the font-weight should be 900.
Hope this will help you all.
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 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;
}
I'm designing a site with a fixed repeated background but can't work out why it has one problem.
If you load the site in a small window, then scroll right, the background doesn't carry on and the background colour show's instead.
Any ideas?
Site is: http://new.focalpix.co.uk/
CSS for the background is:
body {
background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}
Try the following CSS:
body, html {
color:#fff;
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}
body {
font-size: 70%;
}
It looks like (in both Opera and Chrome) the browser is treating the area outside the browser's initial viewport as part of the HTML tag but not part of the BODY. You can verify this by putting the background-image on the HTML but not the BODY tag - and then see how it appears only in the scroll-to-view area of the document. I have no idea why this is happening - anyone?
CSS above appears to fix the problem, though.
you have defined body background: url in style.css line 13, but also defined rules for body background in the rule starting on line 17.
The rule on line 17 is for body, html, but the one starting on line 11 is just for body. You could probably condense these into one rule, defining exactly what you want the background to be -- a colour or an image from a url
This is due to the fact that the <body> tag is set by default to 100% of the width of browser window - not the site. This means when the width of the window is less than 960px - the width of your site, the body block ends. To fix this, simply set:
body {min-width: 960px}
Unfortunately, min-width does not work in old versions of Internet Explorer without a JavaScript hack called minmax. I would suggest enclosing the javascript embed code for it inside some conditional comments to prevent an unnecessary HTTP request and potential compatibility errors in new browsers. So embed minmax like so:
<!--[if lte IE 7]>
<script type="text/javascript" src="minmax.js"></script>
<![endif]-->
Also, a general tip - these issues are fairly easy to resolve by playing with firebug.