I am attempting to use a custom font using #font-face to my CSS file in Visual Studio. Note I am brand new to web development.
In Visual Studio, functions are color coded, and the url() part of my code below is not colored in like I see in other posts on StackOverflow and in YouTube tutorials.
The .ttf file is located in the same folder as my CSS file.
I am wondering if there is something I need to install to get the url() function to call properly.
#font-face {
font-family: 'example_font';
src: url(example.ttf) format(truetype);
}
body {
font-family: 'example_font', 'Arial';
text-align: center;
background-color: wheat;
}
I have tried moving the ttf file and updating the path location as well as opening my html file in separate browsers. I have also edited the backup font 'Arial' to other fonts and have found they changed the font in my browser when calling my HTML file. \
[image of the lack of url() coloring] (https://i.stack.imgur.com/QxVTJ.png)
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 have specifics fonts that will be tied to user layouts. When a user logs in, they will see their selected fonts which will be loaded from the server.
I will be using Angular to style the specific elements. How can I use #font-face in ng-style? Is it possible?
font-family works if I type all the possible font-faces prior which is tedious and hard to maintain. the CSS is the section I want to load dynamically based on the user's fonts
**CSS**
#font-face {
font-family: CustomFontName;
src: url('CustomFont.ttf');
}
#font-face {
font-family: CustomFontName2;
src: url('CustomFont2.ttf');
}
**JS**
textbox.style = {
'font-family': CustomFontName
}
**HTML**
<p ng-style="textbox.style">{{ textbox.placeholder }}</p>
The website is here, you can test it out with validation code "ImprintPlus" and then change templates. the user will want their customized fonts in there.
I have this as style used in google app script webapp where we setup style sheet also as html page (with style tags included) and include them in main html page. It uses default font instead of snippet below.
#font-face
{
font-family: myFirstFont;
src: url('https://dl.dropbox.com/s/g2lk505elj1aamj/MISTV___.TTF')
}
div.happy {
font-family: 'myFirstFont';
}
Regards,
Miten.
Font-faces are not allowed with HTMLService and Caja Sanitization, ran into the same problem last week myself.
https://groups.google.com/forum/#!topic/google-caja-discuss/WhqEZqfFn6g
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!