This question already has answers here:
How to embed fonts in HTML?
(6 answers)
Closed 6 years ago.
In order for my website to look good I need to use a custom font, specifically, Thonburi-Bold. The problem is - the font does not get displayed unless the user has installed it. It also isn't displayed in firefox.
Is there a workaround to this problem?
You have to import the font in your stylesheet like this:
#font-face{
font-family: "Thonburi-Bold";
src: url('Thonburi-Bold.ttf'),
url('Thonburi-Bold.eot'); /* IE */
}
You can use CSS3 font-face or webfonts
#font-face usage
#font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}
webfonts
take a look at Google Webfonts, http://www.google.com/webfonts
Yes, there is a way. Its called custom fonts in CSS.Your CSS needs to be modified, and you need to upload those fonts to your website.
The CSS required for this is:
#font-face {
font-family: Thonburi-Bold;
src: url('pathway/Thonburi-Bold.otf');
}
CSS lets you use custom fonts, downloadable fonts on your website. You can download the font of your preference, let’s say myfont.ttf, and upload it to your remote server where your blog or website is hosted.
#font-face {
font-family: myfont;
src: url('myfont.ttf');
}
First, you gotta put your font as either a .otf or .ttf somewhere on your server.
Then use CSS to declare the new font family like this:
#font-face {
font-family: MyFont;
src: url('pathway/myfont.otf');
}
If you link your document to the CSS file that you declared your font family in, you can use that font just like any other font.
Related
In my webpage, using google web fonts is ok.
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600,700,300italic,400italic,600italic">
<div style="font-family: 'Source Code Pro';">My Text</div>
it's ok using like this. But I've server hosted .otf font and I want to use it on my webpage, I've tried using like
#font-face {
font-family: 'MyFontName';
src: url("https://www.mywebsitepage.com/fonts/MyHostedFont.otf") format("opentype");
}
<div style="font-family: 'MyFontName';">My Text</div>
But it doesn't work. The reason why use my font is I can't find my font in free google web fonts.
Regarding to your sample, I hope that not the case you are really using it. I mean you have separate .css file which includes the font-face declaration and you attach this file in the head of your document, or using it like a part of <style>...</style> construction better also in head of document. If yes, so you can try to not use .otf, but using .woff and .woff2 instead.
It's not proper way to use .otf for web fonts now. Currently, if you don't really need support old versions of IE (8 and lower) you can just load fonts in .woff and .woff2 formats and that will cover your needs.
Like this:
#font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
If you have .otf font you can really easy convert it to need web-font formats using some online generators like https://transfonter.org/ or similar.
When I use fonts on my webpage, I either use Google Fonts or fonts that are installed on my system. I wanted to know, if it's possible to have a folder with fonts saved in the same folder as the index file, and use those fonts in the webpage without having to install them on the system.
You can use webfonts that live on your server alongside your html and css by referencing them in your css file:
#font-face {
font-family: "myFont";
src: url("myFont.ttf");
}
then you can use it as you would a google web font:
html {
font-family: "Bitstream Vera Serif Bold", serif;
}
More information and examples (including the ones I used) can be found on MDN.
I've decided to make my own tumblr theme and I have a little problem. I'm trying to add a personal font and I used theme assets, so the font is uploaded here.
The css code is:
#font-face {
font-family: moon;
src: url('http://static.tumblr.com/ql72inh/AyIomnie6/moon_light.ttf') format('truetype');
}
If you acces the blog here you will see that the menu on the right doesn't have the font that I want. I used font-family:moon; so I really don't understand why doesn't it work
I'm currently making a webpage that imports the needed fonts from Google Fonts this way:
#import url(http://fonts.googleapis.com/css?family=Italianno);
The problem is that every time I load the page I need to be connected to the Internet and it also takes time to load the font. Is there any way I can load the font offline because while testing the page I'll be refreshing it countless number of times and I might not be connected to the internet all the time and I don't want to wait for 3-5 seconds every time for the font to be loaded.
I tried installing the font in the system and then using it in the CSS. It didn't work.
Hey make a fonts folder with css folder and put the desired font there. Then in CSS call this code as example for MeriyoUI font as mentioned below. This would load the font onto your app.
For this you just need to download the font and put that in fonts folder. (pre-requisite).Try using web safe fonts.
Hope it helps.
CSS
#font-face
{
font-family: 'Meiryo UI';
font-weight: normal;
font-style: normal;
src: url('../fonts/MeiryoUI.ttf');
}
1. create a folder in website directory and move your fonts
to it! ( .ttf , .eot , .woff )
example: directory --> webfonts
2. create a css document for that!
example: directory --> css --> webfont.css
3. use this code into webfonts.css
#font-face {
font-family: 'name';
font-style: normal;
font-weight: 400;
src: url('../webfonts/fontname.eot');
src: url('../webfonts/fontname.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fontname.woff2') format('woff2'),
url('../webfonts/fontname.woff') format('woff'),
url('../webfonts/fontname.ttf') format('truetype');
}
4. and in the first line of haed element into your webpage, use bellow code:
<link rel="stylesheet" href="css/webfonts.css" type="text/css"/>
Use CSS3 #font-face. Try making font face of your fonts from any fontface generator like this http://www.fontsquirrel.com/tools/webfont-generator. And to learn how to use them take a look in here http://css-tricks.com/snippets/css/using-font-face/
The html+css for Firefox in windows, looks fine, but same looks out of place in Firefox in Ubuntu. Please do let me know, as to how it can corrected, what should i do?
More info 1: The css code for the text in the attached image:
style="font-family:'Museo 300';
font-size:11px;
text-align:left;
color:#636466;
padding-top:3px;"
Although am changing Museo 300 to font to Arial, Helvetica, sans-serif, so it can load in any browser with these default fonts, but still i see the this problem.
image attached
Most likely the font you are using is not installed on the Ubuntu machine. To get around this you must supply the font yourself. Google Fonts is a great way to do just this.
You can search their site for a suitable font, and then link it in your site <head>.
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
And then use it in your CSS
font-family: 'Roboto', sans-serif;
Sadly, Google Fonts does not have the Museo font you are trying to use. However, you can use the #font-face CSS At-Rule to link to a font file which you are hosting on your site. Make sure that you only host the languages and font weight/style that you plan to use, and that your font file is limited to those same parameters. This will allow the file to be loaded much faster.
#font-face {
font-family: 'My Custom Font';
src: url('http://yoursite.com/yourfontfile.ttf') format('truetype');
}
p.customfont {
font-family: 'My Custom Font', Verdana, Tahoma;
}
(See this answer for more information)