I am trying to use a custom font which works locally for me, but i need to link it too an external website due to a specific requirement.
But as soon as i test it on my localhost when it is linked to my domain - the fonts dont show up
Im not sure if their is a cross domain issue - but any help would be appreciated cheers
#font-face {
font-family: "Wisdom";
src: url("http://transformer.tamar.com/Santa/726318360-Wisdom-Script.eot?#iefix") format("embedded-opentype"),
url("http://transformer.tamar.com/Santa/726318360-Wisdom-Script.svg#Wisdom Script AI") format("svg"),
url("http://transformer.tamar.com/Santa/726318360-Wisdom-Script.woff") format("woff"),
url("http://transformer.tamar.com/Santa/726318360-Wisdom-Script.ttf") format("truetype");
}
h3.step {
font-family: 'Wisdom';
font-size: 1em;
text-align: center;
}
#font-face URL's must be relative.
Example:
src: url("/Santa/726318360-Wisdom-Script.ttf") format("truetype");
Extra explanations about Relative URLs
Font-embedding, that is, the #font-face requires the font file to be created on a per-domain basis.
That's because the some fonts might have copyright issues
Related
Staging site: https://woocommerce-81222-860870.cloudwaysapps.com/
--
The live site shows the correct cursive font. But on the staging, it is not working. I had to update the theme, and now it does not work. I have the same paths too. Not sure whats going on.
I have tried different varieties of paths.
#font-face {
font-family: 'quentinregular';
src: url('font/quentin-webfont.woff2') format('woff2'),
url('font/quentin-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I don't see any errors for the font face.
Image of the cursive font face
The font no longer exists at font/quentin-webfont.woff or font/quentin-webfont.woff2 you will need to locate the new path to the font files. Try searching in the file manager to find the fonts
In your head tag, you have a style tag that contains the following code:
#font-face { font-family:quentin;src:url(//81222-445514-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/05/quentin.woff2) format('woff2'), url(//81222-445514-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/05/quentin.woff) format('woff'), url(//81222-445514-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/05/Quentin.ttf) format('truetype');}
So, there you have font-family:quentin;, but the CSS rules contain font-family:quentinregular;. You need to change that.
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 have been attempting to install a font and use it in my CSS and have been unsuccessful at this. I would like to figure out where am I going wrong. I uploaded the .tff file in the same folder as the CSS file and added to the updated my css file in the appropriate manner.
here is a copy of what I have in my css:
#font-face
{
font-family: ImpactLabel;
src: url('ImpactLabel.tff');
}
p.change
{
font-family:ImpactLabel;
color: #A70C1E;
font-size:3em;
}
Here is my html file:
<p class="change">Text</p>
Check this ->
#font-face {
font-family: ImpactLabel;
src: url('ImpactLabel.ttf'), <-- Check if the path is correct (ttf not tff)
url('ImpactLabel.eot'); /* IE9 */
}
Then just call on your class:
.change {
font-family: 'ImpactLabel';
}
try this http://www.fontsquirrel.com/tools/webfont-generator
#font-face {
font-family: 'primelight';
src: url('prime_light-webfont.eot');
src: url('prime_light-webfont.eot?#iefix') format('embedded-opentype'),
url('prime_light-webfont.woff') format('woff'),
url('prime_light-webfont.ttf') format('truetype'),
url('prime_light-webfont.svg#primelight') format('svg');
font-weight: normal;
font-style: normal;
}
p.change{
font-family: "primelight", Verdana, Tahoma;
}
creat a repository in your website : fonts/prime/
put the prime files inside make sure you have something like this :PrimeLight.otf
read more here I need Prime font for my web site
Upload it to the FontSquirrel Webfont Generator and use the code and files it gives you. Problem solved!
FontSquirrel will generate several different formats of the font which are loaded selectively by different browsers and devices (and thus will give you the broadest compatibility).
Edit: Apparently this font is actually on FontSquirrel already, so all you need to do is click here and download the webfont kit from them.
I got this code that normally works but suddenly it does not, something I miss see that someone else see that's wrong?
#font-face {
font-family: 'OCRAExtendedRegular';
src: url('ocraextended.eot?#iefix');
src: url('ocraextended.eot?#iefix') format('embedded-opentype'),
url('ocraextended.woff') format('woff'),
url('ocraextended.ttf') format('truetype'),
url('ocraextended.svg#OCRAExtendedRegular') format('svg');
font-weight: normal;
font-style: normal;}
After coding this, I put in the html: font-family:'OCR A Extended'; at the div that's like this: <div id="left" style="padding-left:90px; margin-top:-67px; color:#ffffff; font-family:'OCR A Extended';">.
While typing: "font-family", you can add the font: OCR A Extended.
The CSS is linked with the webpage so in my opinion I think that there's nothing wrong..
Someone got an idea?
Thanks!
The name that you should call your font by in the CSS is defined in the #font-face declaration where it says font-family. You need to reference it with that name exactly:
font-family: 'OCRAExtendedRegular';
This documentation describes how font-family works in #font-face: it creates an arbitrary name which you can use to reference the font.
Use this
font-family: 'OCRAExtendedRegular';
instead of
font-family:'OCR A Extended';
this will work and also please be sure that the path you have given is correct