i remember my IT teacher saying something about if i wanted to download my own font and put it on my website i will need to upload the font file as well. Thats straightforward but if i wanted to host my website how would i go about this?
Thanks
The way you control the fonts used in you HTML is through CSS. To use a custom font, you must first define it in the CSS like so:
#font-face {
font-family: myFirstFont;
src: url(somefont.otf);
}
After defining it, you can use it by applying it in other CSS like so:
div {
font-family: myFirstFont;
}
The font files that are generally used are TrueType (.ttf) or OpenType (.otf). There are other types that a proprietary, such as *.eot (Internet Explorer).
You will need to upload these font files along with the other files such as .html, .css, .js etc.
There are few ways to implement font on a website, but first I would strongly recommend reading few articles as using font-face, base64 embedding fonts in css and Getting started with Google fonts. I am sure everything will be clear than.
In order to make add costum font support for all type of browser then you should firstly convert the costum font to other font formats like eot, woff, etc. There are a couple of online converters that do that (they will autogenerate actualy the css rules to add to your site.
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-jvpy8e');
src:url('fonts/icomoon.eot?#iefix-jvpy8e') format('embedded-opentype'),
url('fonts/icomoon.woff?-jvpy8e') format('woff'),
url('fonts/icomoon.ttf?-jvpy8e') format('truetype'),
url('fonts/icomoon.svg?-jvpy8e#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Related
I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).
And they support a nice amount of browsers.
How does one do that? While also preventing people from having free access to download the font, if possible.
Generically, you can use a custom font using #font-face in your CSS. Here's a very basic example:
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}
Then, trivially, to use the font on a specific element:
.classname {
font-family: 'YourFontName';
}
(.classname is your selector).
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS #font-face rules, so you don't have to write your own).
while also preventing people from having free access to download the font, if possible
Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.
To make sure that your font is cross-browser compatible, make sure that you use this syntax:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
Taken from here.
You have to download the font file and load it in your CSS.
F.e. I'm using the Yanone Kaffeesatz font in my Web Application.
I load and use it via
#font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
in my stylesheet.
Today there are four font container formats in use on the web: EOT, TTF, WOFF,andWOFF2.
Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers:
EOT is IE only,
TTF has partial IE support,
WOFF enjoys the widest support but is not available in some older browsers
WOFF 2.0 support is a work in progress for many browsers.
If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in CSS
#font-face {
font-family: 'besom'; !important
src: url('fonts/besom/besom.eot');
src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
url('fonts/besom/besom.woff2') format('woff2'),
url('fonts/besom/besom.woff') format('woff'),
url('fonts/besom/besom.ttf') format('truetype'),
url('fonts/besom/besom.svg#besom_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
If you dont find any fonts that you like from Google.com/webfonts or fontsquirrel.com you can always make your own web font with a font you made.
here's a nice tutorial: Make your own font face web font kit
Although im not sure about preventing someone from downloading your font.
Hope this helps,
there's also an interesting tool called CUFON. There's a demonstration of how to use it in this blog
It's really simple and interesting. Also, it doesn't allow people to ctrl+c/ctrl+v the generated content.
I am working on Win 8, use this code. It works for IE and FF, Opera, etc.
What I understood are : woff font is light et common on Google fonts.
Go here to convert your ttf font to woff before.
#font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}
First of all, you can't prevent people from downloading fonts except if it is yours and that usually takes months.
And it makes no sense to prevent people from using fonts.
A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below.
But if you want to implement a font into your website read this:
There is a pretty simple and free way to implement fonts into your website.
I would recommend Google fonts because it is free and easy to use.
For example, I'll use the Bangers font from Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers)
This is how it would look like:
HTML
<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
CSS
body {
font-family: 'Bangers', cursive;
}
I found a service that allow me to download web fonts:
https://www.fontsquirrel.com/fonts/daniel
I am not a web developer but I am helping to someone to figure out what went wrong.
Here is a web site that uses custom fonts: http://senschild.com
I've implemented:
#font-face{
font-family: 'Daniel-Regular';
src: url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot');
src: url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot?iefix') format('eot'),
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.woff') format('woff'),
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.ttf') format('truetype'),
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.svg#webfont') format('svg');
}
but it does not work for me. The font is still system on the page.
What I did as well:
I also fixed this one as you said and fixed this part '../ as we don't need to move up as Maneesh said. Also I've edited css by removing font-family:JakobCTT; from body, but still does not work. I even added english words assuming that the font only for english characters.
The font files you are using appear to be corrupt, as Failed to decode downloaded font indicates. I've had this problem many times before when using the webfont generator on https://www.fontsquirrel.com.
Edit:
If you download the .OTF file and generate the webfont with https://www.web-font-generator.com/ it appears to work just fine.
Here is your fix:
Add style to the html elements you want to apply the font for. If you want the font to be applied for the whole webpage, then add the following style for body tag either in html or css.
font-family: 'Daniel-Regular';
Try this:
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot?#iefix')
instead of
url('../fonts/daniel_regular_macroman/Daniel-Regular-webfont.eot?iefix')
There should be a ?#iefix not just a ?iefix
I installed a moodle font (Coptic) in my Moodle Course and Theme and it displays correctly in Google Chrome. However when I try to view it in Firefox, I.E. or on my Tablet (Chrome via Nexus 9) it doesn't display the correct characters.
I followed these instructions before https://docs.moodle.org/28/en/How_to_add_custom_fonts_in_a_theme. The only thing is, before I only had Coptic.tff and no other font types. I.e. eot or svg. I then went online to get the other fonts. I.e. I uploaded Coptic.tff and got a zip of the other files. By including these other fonts in the dir. do you think it might fix the problem. Thanks for all you help. :-)
Please include all fonts type like you did. Create a new directory in your theme and call it fonts. Then add all your custom fonts into this directory.
eg: moodle/theme/yourtheme/fonts/
Some times " src: url([[font:theme|fontname.eot]]); ", this may not work.
Please add path like this
#font-face { /* where FontName and fontname represents the name of the font you want to add */
font-family: 'fontname';
src: url('../theme/your-theme-name/fonts/fontname.woff');
src: url('../theme/your-theme-name/fonts/fontname.eot') format('embedded-opentype'),
url('../theme/your-theme-name/fonts/fontname.woff') format('woff'),
url('../theme/your-theme-name/fonts/fontname.ttf') format('truetype'),
url('../theme/your-theme-name/fonts/fontname.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Next ADD the name of your font wherever you want that font to be used in your stylesheet.
For example:
#page-header h1 { font-family: FontName;}
try !!! It will work for you :)
I found this answer here regarding graphic design:
https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend
This is exactly what my fonts are doing, but I'm trying to find out if there's a way to prevent this using html or css or anything web-based.
I'm using "platin" as my font. Do I just need to find a different font?
Any other thoughts on the topic?
If this is caused by using web fonts, I found this SO post (and the accepted answer) helpful: Google webfonts render choppy in Chrome on Windows
My solution was to use the Webfont Generator tool (http://www.fontsquirrel.com/tools/webfont-generator) to convert my font into the variety of web formats and copy their provided CSS into my stylesheet. I was using the Fauna One font from Google, so I had to download it from Google and then upload it into FontSquirrel.
The key is to put the SVG line above TTF, so that Chrome uses it first. Here's what worked for me:
#font-face {
font-family: 'Fauna One';
src: url('fonts/faunaone-regular-webfont.eot');
src: url('fonts/faunaone-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/faunaone-regular-webfont.svg#fauna_oneregular') format('svg'),
url('fonts/faunaone-regular-webfont.woff') format('woff'),
url('fonts/faunaone-regular-webfont.ttf') format('truetype');
}
(This is 99% the same as the CSS file generated by the Webfont Generator, just rearranged a bit).
To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:
#font-face {
font-family: 'Futura';
src: url('futura.eot');
src: url('futura.eot?#iefix') format('embedded-opentype'),
url('futura.woff') format('woff'),
url('futura.ttf') format('truetype'),
url('futura.svg#futura') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'Futura';
src: url('futura.svg#futura') format('svg');
}
}
Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.
Another thing: This trick will cause the browser to download two versions of the font but that's a small price to pay for good looking text!
Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration
<font-face units-per-em="2048" ascent="1900" descent="-510" />
You can change the value for ascent and get it to match the other font format versions.
I have been trying to get the ttf files rendered in Chrome and Firefox but it just doesn't seem to work. While rendering the .woff file is working fine.
I downloaded the collection from http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher and then renamed the Philosopher-Regular.ttf to fancyfont.ttf and then tried:
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
But the font just doesnt seem to add on to the webpage. However if i rename the woff file to fancyfont.woff and try :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
then it all works fine for Chrome and Firefox.
Any solutions to this problem as i have seen the ttf files being rendered onto the browser?
Do not download a TTF from the Google Font API website. It is not intended for you to download the fonts. Instead, you link to a stylesheet which contains #font-face definitions for the font(s) you want to use.
<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
(Do not include multiple <link>s if you want several fonts; instead, use the tool to add all the fonts you want in your page to a collection, and it will generate the appropriate <link> tag.)
Letting Google host the fonts is just like using a well-known CDN for jQuery: there's a good chance that a significant portion of your users will already have the font cached before they even come to your site (by virtue of the fact that they may have browsed other sites that used the same font).
Note that the CSS you link to from the API is actually generated for each individual request by Google's server, tailoring it to the user's browser. Based on the user agent, the most appropriate formats (WOFF, EOT, TTF, etc) are selected and only those are listed in the stylesheet.
Because formats like WOFF are much more efficient size-wise than TTF, most browsers will never see a TTF version. Don't worry though – your font will be rendered correctly in all browsers.
I had some issues rendering a TTF font inside Chrome. convert it into Woff solved it. There is some good onlines services for that. You can find them easily. Also, the size of my font got smaller : 29 Ko to 6 Ko, I don't see anymore reasons to use TTF
Actually the issue was that the TTF files can not be renamed or that they should not be renamed. As I did the same they were not being rendered by the browser. While the renaming of the WOFF is just fine as they are compressed files.
The issue was definitely renaming as when i used the Philosopher-Regular.ttf in font face as :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/Philosopher-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
it worked just fine.