This question already has answers here:
#font-face - how to make it work on all browsers
(4 answers)
#Font-face not working on mobile
(2 answers)
Closed 3 years ago.
I know there are already topics about it, but I have not found a solution to my problem. It may be a silly question but I feel like I've checked everything: the link to my folder, the extensions, the names of the folders and files ... I can't see what is wrong in my code. thank you so much
#font-face {
font-family:"NeutrifRegular";
src: url("fonts/NeutrifRegular.otf") format("otf"),
url("fonts/NeutrifRegular.ttf") format("ttf");
}
body {
background-color: #f1efee;
font-family:"NeutrifRegular";
}
overview of my files :
https://i.imgur.com/fxu8vV7.jpg
https://i.imgur.com/82GUgeg.jpg
overview of my console :
https://i.imgur.com/XNHSIxI.jpg
You wrote the wrong format type.
https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#src-desc
#font-face {
font-family:"NeutrifRegular";
src: url("fonts/NeutrifRegular.otf") format("opentype"),
url("fonts/NeutrifRegular.ttf") format("truetype");
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 20 days ago.
This post was edited and submitted for review 20 days ago.
Improve this question
letters acting oddly
I tried to use this font (Almarai) and added it to my /assets/fonts folder and it's working but as you can see, there are some broken letters .. I'm using tailwindcss.
here's how I called the font weights:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
#font-face {
font-family: 'almarai';
src: url('Almarai-Regular.ttf') format('truetype');
}
#font-face {
font-family: 'almarai';
src: url('Almarai-Light.ttf') format("truetype");
}
#font-face {
font-family: 'almarai';
src: url('Almarai-Bold.ttf') format("truetype");
}
}
Any suggestions ?
I inspected the web console to check if the font is working and it's just working fine except for some letters (ت letter for example)
I have recently been trying to embed font to my website. I don't get it to work, i have watched and read tutorials. I wan't to embed a font called "Ubuntu Light" in ttf format. This is what i have been trying:
#logBtn{
font-family: 'UbuntuLight';
}
#font-face{
font-family: "UbuntuLight";
src: url("CSS/Ubuntu-L.ttf");
}
And the file in the folder: Treeview of project
I'm almost new to this, i've been coding HTML and CSS in maybe 4 months now.
I have been stuck at this before, and that made me cancel my project, because i gave up. But i don't want to give up again. So i would really appreciate some help! :)
You can embed a font quick and easy by using this code:
#font-face {
font-family: 'Name';
src: url('Font.ext');
font-weight: 400;
font-style: normal;
}
Where Font.ext should be replaced with your font file and its extention (file type) e.g.
src: url('Ubuntu-L.ttf');
And the following font-weight and font-style should be referencing the specific font choice.
The url(...) path is relative to the stylesheet.
Therefore, because your stylesheet is in the CSS folder you don't need to include that in the url:
#font-face{
font-family: "UbuntuLight";
src: url("Ubuntu-L.ttf");
}
I am trying to add a local font to a site I am testing. It is called "AcrosstheRoad.ttf" and can be found in my assets/fonts/ folder. I am doing the following to try to read it into the CSS file:
#font-face {
font-family: 'AcrosstheRoad';
src: url('assets/fonts/AcrosstheRoad.ttf') format('truetype');
}
And I want to use it as a certain header type so I am using
h3{
font-family: 'AcrosstheRoad';
color: #333;
}
But unfortunately the font is not loading in. Does anyone know what I'm doing wrong?
Thanks!
Christina
First add a slash before assets:
(('/assets/fonts/AcrosstheRoad.ttf'))
That may or may not be the problem, depending on where your CSS file is, and how your website is structured.
If the above doesn't work, convert the font to .woff2 and .woff (try using this: http://www.fontsquirrel.com/tools/webfont-generator). The reasoning behind this is that some browsers are really picky. Change your CSS to:
#font-face {
font-family: 'AcrosstheRoad';
src: url('/assets/fonts/AcrosstheRoad.woff2') format('woff2'),
url('/assets/fonts/AcrosstheRoad.woff') format('woff');,
url('/assets/fonts/AcrosstheRoad.ttf') format('truetype');
}
I am trying to load a custom font in my website. In my style.css I have the following attributes declared
#font-face {
font-family: billabong;
src: url('./fonts/billabong.ttf');
font-weight: bold;
}
h1.header {
font-family: billabong;
}
And in my html I have the following code;
<h1 class="header">Welcome to</h1>
However, it seems to be defaulting to some other font type so i assume it cannot find it.
The font is back one directory from my css file, and inside a folder called fonts, have i provided the correct path for it to find it? If this is not the issue does anyone know what I am doing wrong?
try adding Apostrophes in the font-family attribute.
font-family: 'billabong';
Also use more formats. not all browsers support ttf.
read more about that here:http://socialcompare.com/en/comparison/browser-fonts-support-comparison
You could export ttf to webfont here: http://www.font2web.com/
I think the only problem here is your directory.
Try first putting your font file all the way up to the same directory as your html file.
Then try this code:
#font-face {
font-family: billabong;
src: url(billabong.ttf);
font-weight: bold;
}
h1.header {
font-family: billabong;
}
If this doesn't work try putting your font-weight:bold; into the header class see if that helps.
If it works then put it back to where you had it. I hate to guess but as i understand you have a fonts file inside your css file. I am assuming that your html file is one directory higher than your css file. In that case you can say
#font-face {
font-family: billabong;
src: url(css/fonts/billabong.ttf);
font-weight: bold;
}
h1.header {
font-family: billabong;
}
You don't need to use apostrophes for your attribute or source url i have made many websites using custom fonts and haven't seen a problem with compatibility and such.
In any case i would always refer to the w3schools website they explain it the best way:
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Hopefully that helps.
I want to use cusotom fonts for my website that is like this :
myfile.php
<p class="custom-fonts">here i want to apply fonts</p>
In fonts folder i have placed this font gurbaniwebthick.ttf and using it in css like this
style.css
#font-face {
font-family: "My Custom Font";
src: url(.../fonts/gurbaniwebthick.ttf) format("truetype");
}
But this is not working for me what should i do please help me with it ,
#font-face {font-family: "My Custom Font"; src: url('../fonts/gurbaniwebthick.ttf') ;}
use the font-family as
class{
font-family: My Custom Font;
}
And also I guess you are not pointing the file correctly.
Add this to your CSS file:
.custom-fonts {font-family: "My Custom Font";}
Basically with the #font-face you define that the name "My Custom Font" should point to the specified url. After that in the CSS file you can use "My Custom Font", and the browser will know where to load the file from.
Also make sure that the font file is reachable where you specified it.
Hope this helps.
You have done the first two steps you need, but there is one further step required. This is to associate your new font-face with the class of the p tag, like so:
p.custom-fonts {
font-family: 'My Custom Font'
}
You can see an example of this from Google Web Fonts: http://www.google.com/fonts#QuickUsePlace:quickUse/Family: (and some example CSS: http://fonts.googleapis.com/css?family=Wellfleet)