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.
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
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;
}
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 am making a website in which I am using a font "PT Sans Narrow"
It seems Chrome and many browser do not have this font.
Is there some way by which this font could be included with the website while uploading so that viewers get to see PT Sans Narrow?
The website could be seen here
As one may see, the " Hi! I am ... " and so on is not in PT Sans Narrow.
How does one make that font and all other PT Sans Narrow?
Help is deeply appreciated!
You're going to want to put a link in your header to the font.
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
then, your html will need something like this:
<span class="pt-sans-narrow">Hi! I am ...</span>
and your css will look like this:
#pt-sans-narrow {
font-family: 'PT Sans Narrow', sans-serif;
}
Edit
After looking at your website, you are already calling the font from the style.css file in the body, so it should all work fine if you just add the link to the header.
You can download the font file and load it in your CSS.
load and use it as
#font-face {
font-family: "Custom font";
src: url("../fonts/customFont-Regular.ttf");
}
in your stylesheet.
also see:
Using custom fonts using CSS?
After reading your comments, and looking at your screenshots, I don't think PT Sans Narrow is what you're after. Because the question is about PT Sans Narrow, my other answer still stands, but here are some suggestions:
Try adding this to the header, in place of the two instances of PT Sans Narrow:
<link href='http://fonts.googleapis.com/css?family=Lato:400,300|Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>
Then, you can play around with the font of the body. These fonts are similar to what you are after and you could do something like:
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
}
I think that's more what you're after. Try customizing, as well by changing
font-weight:400;
or
font-family: 'Source Sans Pro', sans-serif;
Play around with it and let me know what you come up with.