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)
Related
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");
}
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'm using the Amatic SC 700 normal from google fonts.
This is the link on google fonts : https://www.google.com/fonts/specimen/Amatic+SC .
The issue is that right now the char ? is converted in ® .
The css code I used is:
#import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);
body {
font-family: 'Amatic SC', cursive;
font-style: normal;
font-weight: 700;
}
The html looks like this :
<html> ???? </html>
This is a screenshot of the issue :
This is the jsfiddle link: http://jsfiddle.net/m4vev43a/
I tested this issue on:
Chrome Version 42.0.2311.90
Firefox 37.0.1
Opera 12.16
Any idea how I can fix this?
Are my browsers getting crazy?
Or it's a bug in the font?
Update:
When using :
#import url(http://fonts.googleapis.com/css?family=Amatic+SC);
So without the suffix :400,700 the question mark character is displayed properly.
Unfortunately using the above code + bold text is totaly messing up with the letter spacing in Chrome, Firefox, Opera.
This is a known issue with the bold version of the Amatic font, as can be seen in this bug report from November, 2011. Your font was implemented correctly, it's just that the font file itself has a bug.
A workaround is to use the regular variant for question marks. I know that's hardly a great solution but it seems there's not much else you can do.
One possible workaround I've used to recover this situation.
Note: is not perfect if you need to trust the letter spacing for each browser.
Actually the idea is :
define again the Amatic font in addition the std one, but without the :700
generate a special class to handle just the sentences with the question mark
#font-face {
font-family: 'Amatic';
src: url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5FtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
.has-question-mark {
font-family: Amatic;
}
I have some custom icons that I want to use as a webface font:
However, I can't seem to get them displayed.. All I get to see is the corresponding letter ('a' and 'f'). As shown here You'll also see the working example of the font 'socialico'
Use #font-face In the past I had lots of troubles with font-face but if you type it out right it works fine:
#font-face {
font-family: 'Custom Font Name';
font-style: normal;
font-weight: 400;
src: url(linktofont.com/font.ttf) format('truetype');
}
Replace "Custom Font Name" with what you would like your font to be named when using CSS. and replace "linktofont.com/font.ttf" with the path to the font.
EDIT
Sorry, I read that wrong, I found the problem. If you look at your #import
#import url (http://pastebin.com/raw.php?i=sc4rCApa);
You have a space between "url" and your path, so reaplace it with:
#import url(http://pastebin.com/raw.php?i=sc4rCApa);
I had the same issue - and all my syntax was correct. I was instructed by a friend that it may be the font itself that was broken or incorrect. Here's how it was resolved:
(1) Used original font downloaded from fontfabric.com
(2) Went to www.fontsquirrel.com to generate a new font kit... including the css
(3) Uploaded fonts generated from FontSquirrel
(4) Replaced my CSS with the css generated from FontSquirrel for the #font-face section
(5) Updated the name of the font that is called for later in the CSS
and that was it.... worked like a charm!