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!
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.
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?
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 font-face CSS:
<style>
#font-face {
font-family: 'museo_slab500';
src: url('/css/fonts/museo_slab_500-webfont.eot');
src: url('/css/fonts/museo_slab_500-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/museo_slab_500-webfont.woff') format('woff'),
url('/css/fonts/museo_slab_500-webfont.ttf') format('truetype'),
url('/css/fonts/museo_slab_500-webfont.svg#museo_slab500') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
Quite straightforward. The problem is:
If I keep this font-face definition alone in its .css file (and the font-family is applied to the various headings, body in another .css file) I don't see the font applied in any browser. I checked with firebug, everything is read, the font is downloaded but is not applied.
If I move the font-face definition from an external .css file and put it INLINE in the HTML everything shows correctly.
If I remove the above code from inline inside my page and put it in an external .css and put this instead of the style tags:
<link type="text/css" rel="stylesheet" href="/adminskin/default/css/font-families.css" />
. Any hint on why this happens? I'm going crazy.
Ok ..... I found the answer to this madness.
It seems that while Google Chrome has no problems at all, both IE and Firefox (didn't try Safari or Opera) can't cope with absolute url pointing to an external .css with a font face definition.
So while this works in all browser (inside the .css is just the font-face definition)
<link rel="stylesheet" type="text/css" href="/skinadmin/default/css/font-families.min.css?v=2.0.0.0" />
This works ONLY in Google Chrome.
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/skinadmin/default/css/font-families.min.css?v=2.0.0.0" />
Isn't this madness? I think it is.
I am trying to load ttf font before the page load so that user can type with that font in the form but no luck, I did create a folder called 'font' in the root of site and did add the line below in css but no luck, pls help
<style>
##font-face {
font-family: myfont !important;
src: url('/fonts/myfont.ttf') format("truetype"); }
</style>
Note: I am not doing MVC, just asp.net web page, thanks