I'm facing a problem by adding a font to my website and applying it to the title of the product -
110 DEATH KNIGHT BLOOD 963
https://wowaccounts.eu/product/110dkblood950/
Instead of showing the custom font, it applies the default one.
Here is the link to the stylesheet in my header:
<link rel="stylesheet" href="https://wowaccounts.eu/wp-content/themes/wowtheme/fonts/stylesheet.css" type="text/css" charset="utf-8">
this is what's insite the style sheet:
#font-face {
font-family: 'lifecraftregular';
src: url('https://wowaccounts.eu/wp-content/themes/wowtheme/fonts/lifecraft_font-webfont.woff2') format('woff2'),
url('https://wowaccounts.eu/wp-content/themes/wowtheme/fonts/lifecraft_font-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
and this is how I applied the font:
h1.product_title.entry-title{
font-family: 'lifecraftregular';
}
I wasted hours to find out what's the problem... no result yet. Thank you in advance!
If you inspect console you may notice two things:
1)
Failed to load resource: the server responded with a status of 404
(Not Found)
And 2)
If you open the folder structure in the sources tab, you will not find the font file like you do with stylesheet.css file (hence the 404 error).
You are targeting the text correctly. I just don't think your file is in the correct folder. Re-visit exactly where you placed the files. Is it possible that instead of the wowtheme folder, you placed them both in the default wordpress theme folder by mistake?
Related
A beginner question: I know how to use online image--copy paste in url but don't know how it works if downloaded. I downloaded the font as a zip file but I don't know what to put in the url, the same question for image. Thanks.
As you a beginner I will explain everything to you step by step.
In the beginning you must unzip the compressed file sansationlight.zip
Right click on sansationlight.zip then click on Extract files
You will get the following window
Click on OK
You will get sansationlight folder
Create a folder next to the index.html file and name it Fonts
Copy the folder sansationlight that you unzip to the Fonts folder
Copy
Paste in Fonts folder
Add the following style code to the style tag in the index.html file:
#font-face {
font-family: 'SansationLight';
src: url('Fonts/SansationLight/SansationLight.eot');
src: url('Fonts/SansationLight/SansationLight.eot?#iefix') format('embedded-opentype'),
url('Fonts/SansationLight/SansationLight.woff') format('woff'),
url('Fonts/SansationLight/SansationLight.ttf') format('truetype'),
url('Fonts/SansationLight/SansationLight.svg#SansationLight') format('svg');
font-weight: normal;
font-style: normal;
}
div{
font-family: 'SansationLight';
}
Here you will see how the code will appear on the your HTML page:
The result:
Here is the font before adding the style code:
If you want to use an external style file, follow these steps:
After copying the sansationlight folder to Fonts folder, create another folder next to the Fonts folder, name it stylesheets
Inside the stylesheets folder, create the style.css file and open it.
Copy the following code into the style.css file:
#font-face {
font-family: 'SansationLight';
src: url('../Fonts/SansationLight/SansationLight.eot');
src: url('../Fonts/SansationLight/SansationLight.eot?#iefix') format('embedded-opentype'),
url('../Fonts/SansationLight/SansationLight.woff') format('woff'),
url('../Fonts/SansationLight/SansationLight.ttf') format('truetype'),
url('../Fonts/SansationLight/SansationLight.svg#SansationLight') format('svg');
font-weight: normal;
font-style: normal;
}
.mydiv{
font-family: 'SansationLight';
}
Note, I've added ../ for one step back out of the stylesheets
folder
Here you see how the code will appear on the your style.css file:
To link the style.css file with index.html, use the link tag in index.html:
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
This is how the code will appear in the index.html file:
Note
In the first way I made the font style for all divs
div{ }
In the second way, the class was used .mydiv
For adding images:
Create a folder next to the index.html file and name it images
Add the image you want to use to the images folder
Use the <img> tag to add an image
<img src="images/image.jpg" style="width: 50%; height: 50%">
The result:
Useful Links:
HTML Tutorial
CSS Tutorial
HTML, CSS and more
HTML5 video Tutorial
CSS3 video Tutorial
The image I used
Ok, sounds like you're trying to add images to a website. Your images need to be hosted somewhere to be used on a website.
When you use a URL of one that is already on the Internet, that image is hosted by someone else.
If you've downloaded it, you'll need to add it to your web project, which means you'll be hosting it yourself. It will then use a URL to reference the image and display it, but that URL will be on your own domain.
Depending on the software you're using to build this, sometimes you can drag and drop the image into your web page, and the software will do the rest.
Images on your website
Like Andrew says, in order to use images in your website, the images should be on any place on the web.
You can use Amazon S3 for storing your website images.
https://aws.amazon.com/s3/.
Once you get the image online url, you can use it on your html just pasting it on the src attribute of an img tag.
<img src="url/of/the/image">
Custom Fonts on your website
Now, if you want to use a custom-font to your website, you should paste your font files into your website folder and create a css3 rule like below:
#font-face {
font-family: myfont;
src: url(route/to/your/font/my_font.woff);
}
Then, if you want to use the font, for example on all you h2 tags:
h2 {
font-family: myfont;
}
Hope it will help you.
In my application I am using different fonts and the glyphen-icons of bootstrap.
To see the results in all the browsers, I have put all the neccessary font-types(woff, tft, svg,..) in the font-face.
For the bootstrap icons, I have just put the neccessary types in the font folder.
If I go localhost, everything works fine. In all the browsers, I can see the results.
But now I deployed my application (war) on a real server.
In fireFox i can still see the icons and the font, but not in Chrome and IE.
There I get the following error in console:
http://myTestServer.com/admin-UI/fonts/source-sans-pro/Source_Sans_Pro_400.woff Failed to load resource: the server responded with a status of 500 (Internal Server Error)
...
GET http://myTestServer.com/admin-UI/fonts/glyphicons-halflings-regular.woff2
GET http://myTestServer.com/admin-UI/fonts/glyphicons-halflings-regular.woff
GET http://myTestServer.com/admin-UI/fonts/glyphicons-halflings-regular.ttf
I don´t understand, why does it works local and not on the real server.
Does anybody know this problem?
my Css:
#font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url('../fonts/source-sans-pro/Source_Sans_Pro_300.eot');
src: url('../fonts/source-sans-pro/Source_Sans_Pro_300.eot?#iefix') format('embedded-opentype'),
url('../fonts/source-sans-pro/Source_Sans_Pro_300.woff') format('woff'),
url('../fonts/source-sans-pro/Source_Sans_Pro_300.ttf') format('truetype'),
url('../fonts/source-sans-pro/Source_Sans_Pro_300.svg#SourceSansPro') format('svg');
Thank you!
UPDATE:
the index.html before (worked only in the localhost sever of spring Boot):
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
index.html after (this works in tomcat and also in myServer)
<!-- Bootstrap Core CSS - tomcat-->
<link href="http://localhost:8080/adminUI/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Core CSS -myTestServer-->
<link href="http://myTestServer.com/adminUI/css/bootstrap.min.css" rel="stylesheet">
The main.css I also added the absolute path. My question is now, is there a way to replace the absolute path: "http://..../" with a variable.
If I use the relavtive path that would be the same problem like at the beginning.
I hope you understand what I mean.
Your fonts and style should be in same parent directory directory like this. Look at fonts and style folder and ignore other folders this is an example.
then include the bootstrap css in in your document like this.
<link rel="stylesheet" href="http://example.com/style/bootstrap.min.css">
replace example.com with your domain. bootstrap will automatically find the font file in same parent directory. this is absolute path to bootstrap css file.
Everything is fine but when I use ../ it doesn't work. To call the CSS I use: <link rel="stylesheet" href="../../IcoMoon-App/style.css" /> and it do appears but as . I get the error at MainFolder/Albumes/Clarity_Deluxe_Edition/index.html, but when use the icons at MainFolder/index.html they're displayed well (note that the css location to this one is <link rel="stylesheet" href="IcoMoon-App/style.css" />). This is how my directory is structured:
MainFolder
├index.html
├css
│└index_style.css
├IcoMoon-App
│├IcoMoon-App.eot
│├IcoMoon-App.svg
│├IcoMoon-App.ttf
│├IcoMoon-App.woff
│└style.css
└Albumes
└Clarity_Deluxe_Edition
├index.html
└css
└index_style.css
Yes, because of I changed the location, I also changed the #font-face:
#font-face {
font-family: 'IcoMoon-App';
src:url('IcoMoon-App.eot?xzz47n');
src:url('IcoMoon-App.eot?#iefixxzz47n') format('embedded-opentype'),
url('IcoMoon-App.woff?xzz47n') format('woff'),
url('IcoMoon-App.ttf?xzz47n') format('truetype'),
url('IcoMoon-App.svg?xzz47n#IcoMoon-App') format('svg');
font-weight: normal;
font-style: normal;
}
Am I using wrong the "back folder" (../, don't know the exact name)? Or I did a mistake when changing the location?
One solution to this is using a different way of defining your paths.
In your CSS file, change the path to your IcoMoon font files to:
src:url('/IcoMoon-App/IcoMoon-App.eot?xzz47n');
The / at the very start of the URL makes the browser start from the domain-level of your website and then add the URL exactly as it appears in the example I gave. This will build an "absolute" URL to your IcoMoon font files, regardless of how deep in your folder structure you are.
A drawback to this approach is that the fonts may not appear when you're browsing your site locally (e.g. at http://localhost/~alej27/yoursite) because that would make the browser search for the font files at http://localhost/IcoMoon-App/IcoMoon-App.eot?xzz47n. There are ways around that (hosts file modifying and setting up a virtual domain) but that's outside the scope of this question :)
I have a master template in aspx from which I create other aspx pages from and in the master template I have referenced a css style sheet. For some reason the background image that i've set on the body and the fontface that i've applied is not working anymore. It simply does not show up on any of the aspx pages created from the master template.
I can not for the life of me figure out why it's not showing. In fact, in Visual Studio the background DOES show.
Here is an image of my project directory so you can see how they are all positioned.
http://i.imgur.com/xHFOXil.png
So I have my stylesheet referenced for all the aspx pages in the base Cafe directory AND the Aspx files in the Secure folder by the simple
<link href="Styles/Coffee.css" rel="stylesheet" media="screen" />
<link href="../Styles/Coffee.css" rel="stylesheet" media="screen" />
So the style sheet has been referenced correctly as some objects do change as they are suppose to.
Here is the code in the css file : http://slexy.org/view/s2OAgP08oS
Also this is thie output of the page in both Visual Studio and the output in the browser :
http://i.imgur.com/Hsh6sLD.jpg
This was working before just fine, the labels and all text on my aspx page was displaying with the fontface etc. Background was fine in both IE and FF. Don't get what's happened now.
Okay folks, rookie mistake on my part. It was the fact that I wasn't referencing to the fontface files or the image correctly. Because I had /Fontface and /Images it was going into CSS STYLES FODLER/Images.. When in fact it was in the Images folder of the directory above.
So doing this fixes it.
#font-face {
font-family: 'MolotRegular';
src: url('../Fontface/Molot-webfont.eot');
src: url('../Fontface/Molot-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fontface/Molot-webfont.woff') format('woff'),
url('../Fontface/Molot-webfont.ttf') format('truetype'),
url('../Fontface/Molot-webfont.svg#MolotRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body
{
font-family: 'MolotRegular', Arial, Helvettica;
background-image: url("../Images/background.jpg");
margin-top: 0px;
}
TL:DR : Do not trust the output in Visual Studio. It's a LIE!
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url('cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url('DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff') format('woff');
}
I downloaded the fonts from the url the google css provided so I could use it without being online. The code works when clicking the .html file and opening it in a browser. However, when I place all my files on a local webserver it does not work.
Any ideas? Keep in mind, I will not be connected to the internet.
Adam there might be various reasons for this behavior as #Kyle suggested
First i would check the url to the font-file resolves correctly. From your CSS declaration above it seems that browser will expect the file to be present in same directory where CSS exists
Second and yes google might have blocked leeching/downloading the files. Only way to check this is first use the font to be loaded from google service 'Note the size of the file' then download and check the size. If they are same they do allow download
Third webfonts need to be browser specific here is the explanation from themselves
When a browser sends a request for a Font API stylesheet (as specified
in a tag in your web page), the Font API serves a stylesheet
generated for the specific user agent making the request.
so each time your browser requests the font you are actually downloading a small CSS snippet and then the Font family from the directory
Its strange if the font works fine on computer by opening html file, but not with the localhost. Are you sure you are copying all font files and placing in the same directory? Since the file name is so complicated and long, may be you are doing some mistake with the names? Are you using same browser?
And no, There is nothing like Google does not let downloading the files. Just to make sure, I have downloaded a font (GloriaHallelujah) from google fonts and tested with following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google font test</title>
<style type="text/css" media="screen">
#font-face {
font-family: GloriaHallelujah;
src: url('GloriaHallelujah.ttf');
}
h1 { font-family: GloriaHallelujah, helvetica, arial; }
</style>
</head>
<body>
<h1> Hello World </h1>
</body>
</html>
This work fine on desktop, as well as local host. May be you can download same font from here, place in the same directory and then test on your localhost and see.
On my Windows 7 IIS server I had to add woff in the mime types to get them to work.