I've recently changed the font in my store hosted on BigCartel with the #font-face feature. Unfortunately there are some characters that still remain with the font from BigCartel. I've added in my CSS these lines:
#font-face {
font-family: GothamBlack;
src: url(https://github.com/JDRF/design-
system/blob/master/dist/fonts/gotham/black/gotham-black-webfont.woff2);
}
body {
font-family: GothamBlack, sans-serif;
}
A friend told me to change the part in the layout tab, but that didn't helped me to fix the issue. Any clue on how can I do it?
Thank you
Related
I found a gorgeous font called Slim Joe on a webpage whose link I posted below.
Even though I spent quite some time searching through their code, I couldn't find how/where exactly they included the font. I can see it being used in their CSS file (font: Slim-Joe), but I don't see where it's included in their html.
Could someone help me with including this font in my html? I understand what to do/how it looks like when I'm browsing through fonts that Google is offering (since they make it pretty easy to include in my HTML), but I can't do anything about this specific font.
The webpage where it's included:
http://presentation.creative-tim.com/ (where it says "creative tim")
How the font looks like:
https://befonts.com/big-john-slim-joe-font.html
You can include fonts into your website by css #font-face rule.
This requires having either the otf or ttf font file on your server.
To make this work you use the font-family property to name font. This is what you will use later to reference the font you have downloaded. Then you use src to map it to a ttf or otf file downloaded somewhere on your machine.
Declare it like
#font-face {
font-family: john-slim-joe;
src: url(myFontsFolder/john-slim-joe.ttf);
}
Use it like
p{
font-family: john-slim-joe;
}
To add a font to your website:
Locate the CSS file.
Create or locate your fonts folder.
Use the CSS's #font-face property to add your font file via url. This is also where you will name your font. Here's an example to follow from W3School.com's CSS #font-face Rule
After that, you can use the "font-family" property.
Hope this helps!
The website you are referring (http://presentation.creative-tim.com/) has imported the font files from given directory. Take Look at the Html header and you will find the following line:
<link href="/assets/css/fonts/Rubik-Fonts.css" rel="stylesheet" />
On this file, you can see how they imported and declared Slim-Joe font.
#font-face {
font-family: 'Slim-Joe';
src:url('../../fonts/Slim-Joe/Slim-Joe.eot?d7yf1v');
src:url('../../fonts/Slim-Joe/Slim-Joe.eot?#iefixd7yf1v') format('embedded-opentype'),
url('../../fonts/Slim-Joe/Slim-Joe.woff?d7yf1v') format('woff'),
url('../../fonts/Slim-Joe/Slim-Joe.ttf?d7yf1v') format('truetype');
font-weight: normal;
font-style: normal;
}
And usage by the nav bar css:
.navbar .navbar-brand {
font-weight: 600;
margin: 5px 0px;
padding: 20px 15px;
font-size: 20px;
font-family: "Slim-Joe";
letter-spacing: 0;
}
I am trying to add a Font to a website im making using #Font-Face but its not working. I did it exactly like in the link above, but its not working.
My Code:
#font-face {
font-family: 04B;
src: url("04b.ttf") format('truetype');
}
table {
margin:auto;
text-align:center;
font-size:40px;
font-family: 04B;
table-layout: fixed;
width: 100%;
}
h1 {
text-align:center;
font-size:50px;
font-family: 04B;
}
<h1>Problem is that the font displays exactly like it does in this demo window but shouldnt since I added a font</h1>
Also the font im trying to use is a TTF font which I got from here. The font is also located in the same directory as the CSS file so I think that should be totally fine
I tried testing it in Edge, IE and Chrome and its always the same...
Am I just being really stupid and missing something?
Making a kit like Pangloss suggested in the comments seems to have fixed it. Im still not sure what I did wrong, but following the exact instructions of the Kit worked perfectly :D
Tricky problem here. For some reason, the default font in Chrome has changed itself to Arial Black (or Arial Narrow - can't really tell) and won't change back. I've tried altering the Chrome font settings, and resetting Windows fonts to default, to no avail. It only seems to be affecting Chrome, not firefox.
Here's what my typical webpage looks like right now:
http://i.imgur.com/AgS0kQ4.png
Ideally, I'd hope to fix this w/o going through the hassle of a full reinstall (I have a lot of bookmarks).
Go To :
C:\Users\\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
And add following 2 lines in Custom.css
#font-face { font-family: 'helvetica neue'; src: local('Arial'); }
#font-face { font-family: 'helvetica neue'; font-weight:bold; src: local('Arial'); }
This worked for me.
I have problem with new fonts in my web site.
I do copy new fonts in folder and make a CSS.
#font-face {
font-family: 'PT Sans Bold Narrow';
font-style: normal;
src: local('PTSANSBOLDNARROW'), url(font/PTSANSBOLDNARROW.woff) format('woff');}
This code works only when it is inserted directly in the header of the web page.
When I add this code in CSS file, all things in CSS works except font-face.
Can anyone guide me what could be the mistake.
I solved. Wrong path url...
url(../font/ptsansbold.woff)
Thanks.
I'm trying to simply embed a font that I have uploaded to my server.
Everything is being loaded correctly, but the wrong font is being displayed. I know this is happening because when I remove the #font-face code the rendered HTML font changes.
Here's my code, I've played around with so many different things in the last hour so shout out whatever you think might work. I've also tried .TTF files.
#font-face {
font-family: Joan;
src: url("../fonts/joan.otf") format('font/opentype');
}
body {
background: url('../images/bg.gif');
font-family: Joan;
}
http://www.fontsquirrel.com/fontface/generator
Wins for me so far in my related adventures.
Here's a website I'm developing with it as we speak: http://bigballoon.businesscatalyst.com/
You may have to put the font name in quotes. Also, for MSIE compatibility, you'll need to convert the font to .eot format. Here's "bulletproof" #font-face as per paulirish.com. You may need to adjust depending on full/postscript font name:
#font-face {
font-family: 'Joan';
src: url('../fonts/joan.eot');
src: local('Joan Regular'), local('Joan'),
url('../fonts/joan.otf') format('opentype');
}