I use this code to implement a personalized font:
CSS
#font-face{
font-family:'playtime';
src: url('../fonts/font-1.otf') format('opentype');
}
p.playtime-font {
font-family: 'playtime', Verdana, Arial, Helvetica, sans-serif;
font-size: 3em;
}
HTML
<div class="texto-horario">
<p class="playtime-font">Horario</p>
</div>
But it does not work, I've tried it on Chrome and Safari and nothing...
I don't know what I am doing wrong please anyone can help me?
Try it without the single quotes:
#font-face{
font-family: playtime;
src: url('../fonts/font-1.otf') format('opentype');
}
p.playtime-font {
font-family: playtime;
font-size: 3em;
}
If this doesn't work, is your console saying anything?
Related
I'm trying to use some customized font in my application.
So i tried downloading Pacifico and trying to use in my application. But getting Failed to decode downloaded font and the font is not loading
Below is my CSS .
#font-face {
font-family: 'MyWebFont';
src: url('#WORKSPACE_IMAGES#Pacifico.ttf') format('ttf');
}
body {
font-family: 'MyWebFont', sans-serif;
font-weight: 300;
line-height: 25px;
font-size: 14px;
}
This is not working. So i tried converting this to .woff as per suggestions found in web and tried below. Even this is failing. I'm using Chrome 74.0 version . How to solve this?
#font-face {
font-family: 'MyWebFont';
src: url('#WORKSPACE_IMAGES#Pacifico.ttf') format('ttf'),
url('#WORKSPACE_IMAGES#Pacifico.woff') format('woff'),
url('#WORKSPACE_IMAGES#Pacifico.woff2') format('woff2');
}
body {
font-family: 'MyWebFont', sans-serif;
font-weight: 300;
line-height: 25px;
font-size: 14px;
}
Problem here is you need upload the font into /i/
#font-face {
font-family: "Pacifico";
src: url("http://localhost:8080/i/Pacifico.ttf");
}
body {
font-family: "Pacifico", serif;
font-weight: 300 !important;
line-height: 25px !important;
font-size: 14px !important;
}
I don't know why Apex is not resolving the #WORKSPACE_IMAGES# but you can upload the font in the web server. In my case I'm using tomcat
I have a small, but immensely annoying problem.
I'm supposed to have a font-family for my h1, in the following fallback: BreeSerif, arial, sans-serif.
BreeSerif should be weight 400.
Arial should be weigth 700.
Sans-serif should be weight 400.
Now I have tried several things, but none seem to work.
First try:
This renders my BreeSerif to "normal", makes Arial to bold, BUT it seems impossible to render sans-serif to "normal" since I've declared the h1 to 700.
Second try:
Now since BreeSerif shall be normal, I could simply apply "sans-serif" to a #font-face and put it in font-weight: 700, but it doesn't work.
/* FIRST TRY */
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 700;'
h1 {
font-family:
BreeSerif,
bold-arial,
sans-serif;
}
/* SECOND TRY */
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 700;
#font-face {
font-family: 'sans-normal';
src: local('sans-serif');
font-weight: 700;
h1 {
font-family:
BreeSerif,
arial,
sans-serif;
font-weight: 700;
/* THIRD TRY */
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 400;
#font-face {
font-family: 'arialBold';
src: local('arial');
font-weight: 700;
h1 {
font-family:
BreeSerif,
arialBold,
sans-serif;
font-weight: 400;
#font-face {
font-family: 'BreeSerif';
src: url('fonts/BreeSerif-Regular.otf');
font-weight: 700;
}
#font-face {
font-family: 'TradeWinds';
src: url('fonts/TradeWinds-Regular.ttf');
font-weight: 400;
}
}
#font-face {
font-family: 'sansnormal';
src: local('sans-serif');
font-weight: 700;
}
body {
width: auto;
background: #eee;
font-family: arial, sans-serif;
}
p {
font-family: helvetica;
font-size: 14px;
color: #222;
}
/* LÖS DENNA SEN! */
h1 {
font-family:
BreeSeri,
arial,
sansnormal;
font-weight: 700;
}
#ContentWrapper {
background: white;
width: 960px;
margin: auto;
}
Expected result: normal, bold, normal
Actual result: normal, bold, bold
Defining dimensions by using size-adjust for fallback fonts slowly hits mainstream according to:
https://caniuse.com/mdn-css_at-rules_font-face_size-adjust
See the current implementation percentage by today used browser
What does this mean?
You can use the following CSS definition:
#font-face {
font-family: 'Lato';
src: url('/static/fonts/Lato.woff2') format('woff2');
font-weight: 400;
}
#font-face {
font-family: "Lato-fallback";
size-adjust: 97.38%;
ascent-override: 99%;
src: local("Arial");
}
h1 {
font-family: Lato, Lato-fallback, sans-serif;
}
As you can see we define a fallback version of our webfont (in our case Lato) and this fallback version is just a refernce to "Arial", which is a safe web font. But with size-adjust we can tweak the size of the fallback font. The attribute ascent-override has the same implementation rate than size-adjust.
Getting the adjustment settings
But now you wonder, where do i get those adjustment sizes. This nice little page calculates them for you and gives you the complete CSS for the custom fallback font:
https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Montserrat
i want my text look better in web view but when i try to load a font for it,it doesnt change.
according to some questions this and this i found this code:
<style type="text/css">
#font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
i tried this for loading it from assets:
<style type=text/css>
#font-face {
font-family: "ROYA";
src="Roya.ttf";
}
p.customfont {
font-family: "ROYA", Verdana, Tahoma;
}
<p class="ROYA">Hello world!</p>
but it doesnt working. what should i do?
use : instead or =
#font-face{
font-family: "ROYA";
src: url("Roya.ttf") format("truetype");
}
and change class name on the next code block
p.ROYA {
font-family: "ROYA", Verdana, Tahoma;
}
<p class="ROYA">Hello world!</p>
You still need url().
#font-face{
font-family: "ROYA";
src: url("Roya.ttf") format("truetype")
}
I am sending an email newsletter.
Some how the font Novecentowide-Medium.otf is not getting applied in any heading.
the original font in PSD looks like
When i send a test email it looks like
The html code for font is
<h2 style="font-family: 'novecento_widemedium'; font-weight:400; padding-left:70px;">Transforming<span>Drones</span></h2>
You could connect your opentype font in css:
#font-face
{
font-family: 'Noto Sans', 'Arial';
font-style: normal;
font-weight: 400;
src: url(path/to/font/Novecentowide-Medium.otf) format("opentype");
}
Or use standart format ttf:
#font-face
{
font-family: 'Noto Sans', 'Arial';
font-style: normal;
font-weight: 400;
src: url(path/to/font/Novecentowide-Medium.ttf); /* Pay attention to extension */
}
My website is not showing my fonts...
CSS Code is as follows...
#font-face {
font-family: 'IconicStroke';
src: url("fonts/iconic/iconic_stroke.eot");
src: local('IconicStroke'),
url("fonts/iconic/iconic_stroke.svg#iconic") format('svg'),
url("fonts/iconic/iconic_stroke.otf") format('opentype');
}
.iconic {
color:inherit;
font-family: "IconicStroke";
font-size: 38px;
line-height: 20px;
vertical-align: middle;
}
Please help...
It is showing in my machine but its not showing after uploading in the space....
There is no http://rgvnnemfl.com/iconic.css, which I'm guessing is where you have the above code. I think your link to the iconic.css is wrong.
If your css in css folder, then your fonts path may be
../fonts/iconic/iconic_stroke.eot
#font-face {
font-family: "IconicStroke"; src: url('../fonts/iconic/iconic_stroke.eot');
}
.iconic {
font-family: "IconicStroke", sans-serif;
}
This should work just fine.