I decided to change the font of my page, with another downloaded from internet. I tried this way, but it doesn't work. The file "font.ttf" is in the same folder as the html file.
#font-face {
font-family: Test;
src: url(font.ttf);
}
header {
font-family: Test;
width: 100%;
margin: auto;
height: 48px;
background-color: white;
}
If your downloaded font has been saved in the main fonts folder on your system then you should just use it the same way as you would use any other font.
E.g.
font-family='New Font';
There should be no difference :)
Directory to the fonts folder;
Control Panel > Appearance and Personalisation > Fonts > Add Font
To add font to your website, you will need more than the font.ttf file. Also, be as organized as possible from the start and don't just dump everything into one level. Later, when more things are added, you may have a mess and it can get more confusing as things get more complicated. Neatly organize into folders.
1- You will need webfont extensions. Meaning, use an online generator to generate webfonts by submitting your .ttf file (make sure you follow the license allowance). Those extensions work on different browsers.
2- You need to create a .CSS file for webfonts. Here is a link for an example:
[link] How to embed fonts in CSS?
3- You need to follow the exact path on how your fonts can be reached.
4- When you open up your .ttf file, pay attention to your font spelling. (this part can be tricky)
5- You will also need a .htaccess file that helps to link your web fonts to your site. You may see your desired font on your local device browser but it may not work on another device that does not have that font installed.
Related
total newbie at html here.
Im looking to incorperate any one of these fonts from:
https://andrewsonline.co.uk/content/fonts/
into a static github page im making for a website.
I see the css code for these fonts is here:
https://andrewsonline.co.uk/content/fonts/fonts.css
Do I just need to copy and paste this into my html?
Where do I place the eot, woff, tff and svg files?
Thankyou for the help
It doesn't matter where you place the fonts, so long as they are referenced correctly:
The prefix / is relative to the root directory.
The prefix ./ is relative to the working directory.
The prefix ../ is relative to the parent directory.
Just make sure to define the font in a #font-face, specifying the desired name in font-family, and the URL of the font in the src attribute. The only font URL that you need to link to is the .woff (the others are just browser-specific alternatives or outdated extensions).
Typically, you would just use something similar to the following:
#font-face {
font-family: externalFont;
src: url(/fonts/GT-Walsheim-Pro-Light.woff);
}
div {
font-family: externalFont;
}
<div>Stylish</div>
Note that Andrew's Online have set up a "No Access-Control-Allow-Origin", meaning that the font inclusion would be blocked by CORS policy if you were to link to their fonts directly. You'll need to download their fonts, then link to a local copy.
Hope this helps! :)
So I know this is a very newbie question but I cant seem to figure this out, don't know what I am doing wrong here. Downloaded a font from Google Fonts, installed it on my machine and am referencing it in my css like this:
* { margin:0; padding:0; font-family:Lobster; }
In my html I just have a p tag:
<p> Hi, this is some text</p>
Are there any extra steps that need to be taken to use a google font installed on your local machine ??
The correct syntax to use a font is font-family:'Lobster', Arial;
Here if the Lobster font is not available it will use the Arial.
Also you can just import a font file in the css.
CSS
#import url(//fonts.googleapis.com/css?family=Lobster:400);
body{ font-family:'Lobster', Arial; }
DEMO
You dont need to download google fonts on your machine to add in your web pages.
Add the following link between your ead tags
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lobster">
There are no extra steps that you need to take if you have actually not just downloaded the font but also installed it (so that you can see it e.g. in the font menu of Notepad) and you just want to see that font used when you locally view your own pages.
If you want to use it on web pages, you should generate the relevant font files in different formats, upload them onto your server, and use #font-face syntax that deals with them.
I am working on an asp.net mvc Intranet web application, and I am using a web layout template which I download from the web. Inside my CSS files there is the following line of code at the beginning of most of the CSS files (of course each CSS has a different font family name):-
#import url(https://fonts.googleapis.com/css?family=Shojumaru);
The problem I am facing is that in the case of users accessing the aspnet mvc intranet and they do not have access to the internet, this is causing the browser to keep trying to download the files from googleapis.com for around 10 seconds.
I am trying to provide these fonts inside my server, so that users will be served these files even if they do not have access to the internet.
Can anyone advise how I can add these fonts inside my asp.net mvc server, instead of retrieving these files from googleapis.com ?
Thanks
You can do it through JavaScript ( i would recommend this way ) using WebfontLoader (the same script that google fonts tell you to use). Through it you can even have a directive to try to get the font via Google Fonts and if it can't get the file in x seconds, use another path ( or do something else ).
And to give a basic answer, all you have to do is open all those googlefonts css links, copy their CSS files and font files (.svg, .woff., .utf., .ttf and .eot) , upload all those files to your host and make your css reffer to your localhost copies
EDIT
Reasons to preffer WebfontLoader over CSS #import
CSS is in the header, so it has to be loaded before the page html
can be shown, JavaScript if put in the end of the HTML, just before
closing the </body> tag are executed last
#import is not very much performance-wise
WebfontLoader have a function to do something while trying to load
a font ( like showing another font or showing nothing ) and a
function to do something if the font was not found ( like trying to
load from another source or calling a js event )
WebfontLoader can load only some characters of a googlefont
(useful if you want to just show a page header with some font). That
way you avoid badwitdh problems and your page is faster
you can font-face in your stylesheet
#font-face {
font-family: 'your-font';
src: url('../fonts/your-font.eot');
src: url('../fonts/your-font.eot?#iefix') format('embedded-opentype'),
url('../fonts/your-font.woff') format('woff'),
url('../fonts/your-font.ttf') format('truetype'),
url('../fonts/your-font.svg#your-font') format('svg');
font-weight: normal;
font-style: normal;
}
h1{ font-family:'your-font', Arial, Helvetica, sans-serif;}
note :- pls add your fonts in your 'fonts' location ...
I am using the Skeleton Grid System and I followed the directions commented out in the layout.css file provided in the grid files to change the global font face of my pages. The issue that I am finding is that it is not overwriting the base.css file font face.
Here are the changes I made in the layout.css file:
And I added the folder "fonts" to the root directory:
When I run the page locally, the base.css file font appears:
Do I need to just overwrite the base.css file?
#font-face simply declares which fonts you want to use. To actually apply web fonts do something like.
body {
font-family: 'HouschaAlt', helvetica, sans-serif;
}
I assume this definition needs to go in your base.css file.
I'm not able to get font-face working (That's why I usually use Google fonts). But a customer has their own font that I must use.
I'm testing and comparing against this site (Main menu)
Here is my fiddle
Why am I not able to get this work? The font on the other website is working just fine.
Here's my CSS:
#font-face{
font-family:'testFont';
src:url('http://www.cphvision.dk/sites/all/themes/vision/webfonts/21B1BE_0_0.eot');
src:url('http://www.cphvision.dk/sites/all/themes/vision/webfonts/21B1BE_0_0.ttf'), format('truetype');
}
ul li a {
font-family:'testFont', sans-serif;
font-weight:normal;
}
I've also tested on my local server. Not working there either.
I have previously tested using font-face on downloaded fonts from Google. No success.
What am I doing wrong?
I've had issues with font-face before, as well. I know that when I have used it I did not surround the font-family attribute with quotes (single or double). Also, for some reason there seems to have been some sort of conflict with putting the font-face rules in the main style sheet so I put them in a separate style sheet and put this at the top of my main stylesheet:
#import url('font.css');
Here is a quick example of one of my instances of this rule, copied directly from the file:
#font-face{
font-family: Kalinga;
src:url(kalinga.ttf);
}
#font-face{
font-family: Kalinga;
font-weight: bold;
src: url(kalingab.ttf);
}
I know that I did not add both the ttf and the eot here, but it's a good example for you to refer to. I would recommend starting with either eot or ttf and getting one working and then adding the other when you're done (less changes to make when tinkering).
I'm going to recommend using a service like Font Squirrel. I say this because you can upload a font and it will automagically convert it to eot, ttf, etc, and provide you with a zip file containing your fonts and some sample files to get you started.
I know it sounds crazy, but I have had trouble getting #font-face working with absolute paths. However I use it all the time with relative paths and it works fine. And I also recommend Font Squirrel. All you need to do is adjust the CSS path relative to where your fonts are from their provided generated kits and code. And of course with Worpress, always use a Child Theme to circumvent default font declarations.