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
Related
Here is the problem. So everything works fine for me on my machine, localhost and when the website is uploaded to online host. But I got my friends to go to the site to check if everything is working and the regular Roboto font loads fine but the thin version of it doesn't. I originally just had the import link from google for the font but later added the font face import code that I found on here but that doesn't work too. I even tried adding the font-weight property but it still doesn't work.
I need help my head hurts real bad here's the code enjoy
Top of the css file
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
#font-face {
font-family: 'Roboto';
src: local('Roboto'), url(fonts/Roboto-Regular.ttf) format('ttf');
}
#font-face {
font-family: 'Roboto thin';
src: local('Roboto thin'), url(fonts/Roboto-Thin.ttf) format('ttf');
}
Class for one of the texts that uses the font
.txt2 { /* text */
font-family: 'Roboto thin';
font-size: 24px;
color: white;
text-align: center;
margin-top: 1%;
margin-bottom: 5%;
margin-left: 20%;
margin-right: 20%;
font-weight: 100;
}
The #font-face is loading a local file, but also, import in my experience doesn't work like how you expect. I'm on mobile so I can't get too detailed but I usually call the fonts url in the html using a tag in the head. This has the added benefit of the browser being able to pull that file in asynchronously, rather than after the css file loads, which will give you a small speed increase.
More than likely this code is actually failing for you too, but your browser has the font in cache and it's safe to use so it does. Or you have robot installed outright.
EDIT: Alright, I'm on a desktop now, and want to clarify some things.
#font-face defines a font and how it can be called. It gives it a name, where the font files are stored, and if it's considered italicized, normal, etc.
The Google Fonts file you are calling contains that information, it's whole purpose is to define the things you are putting in your #font-face lines.
As I said, #import is a bit tricky.
First and foremost, make sure your #import statement is the very first thing your CSS file contains. If you only have one #import, it should be the first line.
Using Google Fonts' other option, the HTML , will work marginally faster. The difference may stop your users from seeing a flicker of the wrong font on their first page load.
Remove the #font-face rules you have altogether, they are overwriting your imports.
As a best practice, give your font-family rule a fallback. font-family: 'Roboto thin', arial, sans-serif;
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
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.
Good day
I'm trying to use wkhtmltoimage (part of wkhtmltopdf) to generate screenshot of websites. I'm trying to use css with some websites, but cant manage to figure out what is wrong
I've looked in the previous posts and I've generated the following base64 for Tahmoa font
#font-face {
font-family: 'Tahoma';
src: url(data:font/truetype;charset=utf-8;base64,AAEA..[LONG STRING]..AA=) format('truetype');
}
I have the following css file where I use it in my css file.
This is test.css file (where I'm doing something wrong?)
#font-face {
font-family: 'Tahoma';
src: url(data:font/truetype;charset=utf-8;base64,AAEA..[LONG STRING]..AA=) format('truetype');
}
h2{
font-family:'Tahoma'
background-color:red;
}
p{
font-family:'Tahoma'
background-color:yellow;
}
body{
font-family:'Tahoma'
background-color:green;
}
I pass the file to file as command line argument, but it has not effect.
if I pass a background color embedded in the file, something like
data:text/css;charset=utf-8;base64,cCB7IGJhY2tncm91bmQtY29sb3I6IHJlZCB9Ow==
which is a red background color, it works ok, and i get the red background for the image.
I want to be able to use regular css file and be able to specify the fonts as well.
Any suggestion is more than welcome.
Edit:
I've tried all the solution on this question and others but still no where
Same Problem with soultion (did not work with me)
Tx
I have the following in my css and the font won't change to what I want it to become.
body{
background-color:#a8a7a7;
color:#C50909;
font-family: main, Calibri;
text-align:center;
}
#font-face{
font-family: main;
src: url('fonts/RegencieLight.ttf');
}
and my css properly links into my html because all of the other css aspects will still be applied. If anyone could help me that would be great. Thanks.
You must provide a string as the font-family name like this
font-family: "main";
so that you can reference it in other places like this
font-family: "main", Calibri
Check out: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
Either
the path is wrong or
depending on the browser and operating system it could not like the font format
Either way I recommend reading Paul Irish's bullet proof #font-face syntax and using Font Squirrel's #font-face generator/packager The packager will take a font and create each format that a web client might need so it will work on all systems.