Add font to website - html

I am trying to add Ubuntu font to my website, I'd like to have it universal on the site so everything is in that font but I started by just adding it to my h1 tag to see if it works, but it doesn't work. I have uploaded the font to my server.
This is my css so far:
#font-face {
font-family: 'Ubuntu';
src: url('ubuntu/Ubuntu-R.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Ubuntu', sans-serif;
font-weight : normal;
margin-top: 10px;
letter-spacing: -1px;
}
h1 {
font-family: 'Ubuntu', sans-serif;
color: #000;
margin-bottom : 0.2em;
font-size : 3em; /* 96 / 16 */
line-height : 1.4;
}
I'm probably being really stupid, as usual. I've looked at other examples but can't really see what I am doing wrong.

The problem can be solved in 2 ways.
You can either add the google font cdn to the head tag of your website if already hosted or if you have active internet access, so you don't need to worry adding it locally in your folder.
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
Like so
Or probably your file path location is wrong
if your fonts are packed the root directory, you can easily call it like
src: url('Ubuntu-R.ttf') format('truetype');
But if it is in a folder (e.g ubuntu)
it can be src: url('ubuntu/Ubuntu-R.ttf') format('truetype');
But if in a very long path.. try doing something like this
src: url(../ubuntu/Ubuntu-R.ttf);
Then calling the font-family attribute, call just "one" name, if it is locally in a folder. like so
#font-face {
font-family: Ubuntu;
src: url(ubuntu/Ubuntu-R.ttf);
}
.myclass{
font-family:Ubuntu; // The exact name for the #font-face
}
Hope it helps

It is as simple as adding this line as the first line of your style.css or whatever you call it:
#import url(http://fonts.googleapis.com/css?family=Ubuntu);
It takes care of everything, and then you can just start using it in your css:
.ubuntu-font {
font-family: "Ubuntu";
}
If you'd like bold and italic or some other things as well, you can just go here, pick those that you want, and copy the #import from section 3 in that page.
Also, with this you do not need to upload the font to your server, I don't see why everyone should upload all fonts to their server when there are several fast CDNs that already have everything there.

Related

Font-Family does not change

I have downloaded the Twitch font, which is Twitchy.TV.
I'm trying to use it, but when I type the font, it doesn't recognize it.
I think it might be because Twitchy (.) TV. The period is messing it up.
I have tried putting it with "" or ''.
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCH</h1>
</div>
</div>
.left h1 { font-size: 22px; color: #fff; font-family: Twitchy.TV; }
Have you included a #font-face declaration in your CSS?
Nowadays the best format for using fonts on the web is .woff or woff2 files, if you don't have your font in this format there are a lot of web font converters available.
#font-face {
font-family: 'Twitchy.TV';
src: url('Twitchy.TV.woff2') format('woff2'),
url('Twitchy.TV.woff') format('woff')
}
(Assuming you have font files in the same directory as your stylesheet named Twitchy.TV.woff and/or Twitchy.TV.woff2)
If you're just testing the font during development and have it locally installed, you can specify a local installation like this:
#font-face {
font-family: 'Twitchy.TV';
src: local('Twitchy.TV');
}
Then you are able to use it like:
.left h1 {
font-family: 'Twitchy.TV';
}
Ensure that you have imported the font if it is from an external source!
If you have downloaded the font, make sure that you have added it to the list of font-families in your computer. This can be done in the Control Panel.
You need to import the font at the top of your CSS using #font-face. This allows you to use non-websafe fonts in your website. the src: url can be either a path in the local storage or on an external site.
#font-face {
font-family: "Twitchy.TV";
src: url("path/to/font.ttf");
}
You can use the font like this
.left h1 {
font-family: "Twitchy.TV";
}
first of all upload you font here https://transfonter.org/ and then you will have generated font prepared and add all your fonts to assets folder and in style.css or style.scss open downloaded folder from transfonter and copy what's inside stylesheets.scss and add to your style.css and then make sure to be correct path to fonts assets/fonts for exameple
#font-face {
font-family: 'Roboto';
src: url('Roboto-Black.woff2') format('woff2'),
url('Roboto-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
}
And then in style.css use it, example
h1 {
color: red;
font-family: 'Roboto', sans-serif; //Here you add default font in case the browser
can't find Roboto font
}

#font-face won't work. how do I do this properly?

So I have this custom font and it won't work. Please help.
#font-face{
font-family: Anton;
src: url('../../assets/fonts/Anton-Regular.ttf')format('truetype');
}
.home-content-right h1{
font-size: 60px;
font-style: 'Anton',sans-serif;
}
#font-face {
font-family: myFont;
src: url(fonts/Akrobat-Bold.otf);
}
.h1{
font-family: "myFont";
}
For example, I put .otf font file in folder fonts, that works without problem. You will just change name of your font and source path.
A couple things could be happening.
First, your h1 tag is using font-style instead of font, so:
#font-face {
font-family: Anton;
src: url('../../assets/fonts/Anton-Regular.ttf')format('truetype');
}
.home-content-right h1{
font: 'Anton',sans-serif;
font-size: 60px;
}
i.e. font rather than font-style on the h1.
Also, it looks like its possible you are using Rails or some other framework based on the folder structure you are using. If so, its possible that the framework is digesting your asset (i.e. fingerprinting it so its Anton-Regular.ttf-02987910hsa or something like that in case it changes so your browser doesn't cache it incorrectly. If you are using Rails, you'll need to use asset-url('URL') in order to get the most recently fingerprinted asset.

Google Font #import + #font-face?

I'm trying to import fonts with Google Fonts with #import and #font-face, in my CSS. I used to only use #font-face with downloaded fonts, but since it takes time to load, I preferred to use the Google Fonts method.
I didn't wanted the "bold" version of Roboto as the "bold" font in my website, so I used #font-face. However, I'm not sure of the way to use it. Is this correct to use #import and #font-face like this?
#import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
#font-face
{
font-family: Roboto;
src: url("https://fonts.googleapis.com/css?family=Roboto:400");
}
#font-face
{
font-family: Roboto;
font-weight: bold;
src: url("https://fonts.googleapis.com/css?family=Roboto:500");
}
#font-face
{
font-family: Roboto;
font-style: italic;
src: url("https://fonts.googleapis.com/css?family=Roboto:400i");
}
#font-face
{
font-family: Roboto;
font-weight: bold;
font-style: italic;
src: url("https://fonts.googleapis.com/css?family=Roboto:500i");
}
I've the feeling I'm importing the fonts twice... but it doesn't even work! (The page displays the default browser font)
Thank you for reading and taking time to help me.
you can use like this in your stylesheet
#import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
h2{
font-family:Roboto;
}
#font-face make sense when you loading font from files on your server. If you importing from google, use only import and write right properties to elements you want.
#import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
h2 {
font-family:Roboto;
font-weight: 500;
}

Adding custom font using #fontface to style.css

I have a custom font I would like to use on a webpage. Specifically GT-Walsheim-Pro-Medium-Oblique.woff from:
https://andrewsonline.co.uk/content/fonts/
The style.css I am working with is this:
https://github.com/syunghong/veil/blob/master/css/style.css
How do I incorperate this font file using #fontface into my style.css file?
I have GT-Walsheim-Pro-Medium-Oblique.woff in a folder called fonts.
here
#font-face {
font-family: 'RobotoBold'; /*this is what you put on your font family*/
src: url('../fonts/Roboto-Bold.ttf'); /*Link to the font*/
}
to use it
p {
font-family: RobotoBold;
font-size: 14;
}
If you own the rights to use the webfont, take the original ttf or otf font and render a full set here at FontSquirrel. Different browsers prefer different font types, the older browsers are pickiest.
Then add the font to the top of your stylesheet so it's loaded first or even before the stylesheet inline if you see FOUT, "Flash of Unstyled Text". More info here but basically you want the font loaded and ready before your html starts loading.
Then load your font like this:
#font-face {
font-family: 'GT Walsheim Pro Medium Oblique';
src: url('GT-Walsheim-Pro-Medium-Oblique.eot');
src: url('GT-Walsheim-Pro-Medium-Oblique.eot?#iefix&v=4.6.3') format('embedded-opentype'),
url('GT-Walsheim-Pro-Medium-Oblique.woff2') format('woff2'),
url('GT-Walsheim-Pro-Medium-Oblique.woff') format('woff'),
url('GT-Walsheim-Pro-Medium-Oblique.ttf') format('truetype'),
url('GT-Walsheim-Pro-Medium-Oblique.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Font Squirrel will output the above code for you when you render the font package there.
Call the font in your css like this, I'm using your H titles as an example, make sure to always have a fallback for the font in case it errors or doesn't load for some reason:
h1, h2, h3, h4, h5, h6 {
font-family: 'GT Walsheim Pro Medium Oblique', arial, sans-serif;
}

Web font not showing in Firefox

http://miche.com/
This is the strangest thing. We're using two web fonts and their varying weights on the above page: Benton Sans and Jubilat, both of which we have licenses for. The h2 ("Interested in joining Miche?" "Already a Miche Representative?") is set to be Jubilat Regular, and is properly showing up in Firefox; however, the h1 ("Welcome!") is Jubilat Light, and appearing as Times New Roman.
Both weights are generated with Font Squirrel.
Both are hosted on the same server.
Both are coded in the same way.
I've reuploaded the files.
I've tried if IE so FF doesn't try to use .eot.
Before you say it: Yes, I have tried Bulletproof.
Why is Regular showing up when Light isn't? I wonder if I'm just not using the right combination of CSS.
#font-face {
font-family: 'JubilatLight';
src: url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.eot');
src: url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.eot?#iefix') format('embedded-opentype'),
url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.woff') format('woff'),
url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.ttf') format('truetype'),
url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.svg#JubilatLight') format('svg');
font-weight: normal;
font-style: normal;
}
#main-container h1.jubilat {
font-family: "JubilatLight";
font-weight: normal;
font-size: 40px;
color: #701271;
text-align: center;
}
I figured it out. Firefox wasn't accepting absolute links, and instead wanted relative. Coupled with Mo'Bulletproof, I was able to get it to show up like so:
#font-face{ /* for IE */
font-family:JubilatLight;
src:url(/FileUploads/CMS/Documents/jubilatlightwebfont.eot);
}
#font-face { /* for non-IE */
font-family:JubilatLight;
src:url(http://:/) format("No-IE-404"),url(/FileUploads/CMS/Documents/jubilatlightwebfont.ttf) format("truetype");
}
#main-container h1.jubilattest {
font-family: "JubilatLight";
font-weight: normal;
font-size: 40px;
color: #701271;
text-align: center;
}
and then my HTML:
<div id="main-container">
<h1 class="jubilattest">WELCOME!</h1>
</div>
Now that I've figured that out, I'll be able to fix the other fonts. Thank you three for your suggestions.
Just want to let you know, there's also a way by configuring the htaccess (discribed by Yu-Jie Lin)
his code:
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Your fonts are not correctly uploaded/linked.
jubilatlightwebfont.woff for example gives a 404 error.
Take a look at the Web-Console of Firefox. It throws some errors, for example:
downloadable font: download failed (font-family: "JubilatLight" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed
source: https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.ttf # https://www.miche.com/FileUploads/CMS/Documents/MicheCorp092911v2.css
(btw: the h2 elements use Times New Roman too, for me.)
I took a look at your CSS and it looks like you aren't correctly defining your font for your H2, so it's defaulting to TimesNewRoman:
#main-container h2.jubilat {
color: #701271;
font-family: "jubilat"; // <----------------
font-size: 18px;
font-weight: normal;
text-align: center;
}
try to use implemented base64-encoded font-files within the css-doc:
#font-face {
font-family:"font-name";
src:url(data:font/opentype;base64,[paste-64-code-here]);
font-style:normal;
font-weight:400;
}
source: http://sosweetcreative.com/2613/font-face-and-base64-data-uri
it worked perfectly...