How can i set the font "lulyupc" for a text?
I must use font-family?
I tried but it doesn't works.
How can i use this font (and all particular font?
I must use a code like this?:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
#font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
div {
font-family: myFirstFont;
}
(all into css file)
Make sure the font you are using is in your root directory of your website. You may even create a folder in your directory just for fonts. Also make sure you reference it's url correctly. If you are using an IDE like Dreamweaver then you may browse for it upon typing src.
#font-face {
font-family: myFirstFont;
src: url(yourfoldername/yourfontfile.woff); /*---Make sure you referenced its location right.*/
}
Related
I have used font-display:swap in my #font-face. But still in google pagespeed I am getting the warning Ensure text remains visible during webfont load
here is the code for font.
#font-face {
font-family: Cocogoose-Pro-Condensed-Regular;
src: url(typsnitt/Ttf/Cocogoose-Pro-Condensed-Regular.ttf)
format('truetype');
font-display: swap !important;
}
#font-face {
font-family: Cocogoose-Pro-Comp-Light;
src: url(typsnitt/Ttf/Cocogoose-Pro-Comp-Light.ttf)
format('truetype');
font-display: swap !important;
}
You have to make sure that the link/file exported has included the property font-display: swap;, it's not enough if you just add it for yourself in the CSS file
Unless you have the actual font file in your local
I found a gorgeous font called Slim Joe on a webpage whose link I posted below.
Even though I spent quite some time searching through their code, I couldn't find how/where exactly they included the font. I can see it being used in their CSS file (font: Slim-Joe), but I don't see where it's included in their html.
Could someone help me with including this font in my html? I understand what to do/how it looks like when I'm browsing through fonts that Google is offering (since they make it pretty easy to include in my HTML), but I can't do anything about this specific font.
The webpage where it's included:
http://presentation.creative-tim.com/ (where it says "creative tim")
How the font looks like:
https://befonts.com/big-john-slim-joe-font.html
You can include fonts into your website by css #font-face rule.
This requires having either the otf or ttf font file on your server.
To make this work you use the font-family property to name font. This is what you will use later to reference the font you have downloaded. Then you use src to map it to a ttf or otf file downloaded somewhere on your machine.
Declare it like
#font-face {
font-family: john-slim-joe;
src: url(myFontsFolder/john-slim-joe.ttf);
}
Use it like
p{
font-family: john-slim-joe;
}
To add a font to your website:
Locate the CSS file.
Create or locate your fonts folder.
Use the CSS's #font-face property to add your font file via url. This is also where you will name your font. Here's an example to follow from W3School.com's CSS #font-face Rule
After that, you can use the "font-family" property.
Hope this helps!
The website you are referring (http://presentation.creative-tim.com/) has imported the font files from given directory. Take Look at the Html header and you will find the following line:
<link href="/assets/css/fonts/Rubik-Fonts.css" rel="stylesheet" />
On this file, you can see how they imported and declared Slim-Joe font.
#font-face {
font-family: 'Slim-Joe';
src:url('../../fonts/Slim-Joe/Slim-Joe.eot?d7yf1v');
src:url('../../fonts/Slim-Joe/Slim-Joe.eot?#iefixd7yf1v') format('embedded-opentype'),
url('../../fonts/Slim-Joe/Slim-Joe.woff?d7yf1v') format('woff'),
url('../../fonts/Slim-Joe/Slim-Joe.ttf?d7yf1v') format('truetype');
font-weight: normal;
font-style: normal;
}
And usage by the nav bar css:
.navbar .navbar-brand {
font-weight: 600;
margin: 5px 0px;
padding: 20px 15px;
font-size: 20px;
font-family: "Slim-Joe";
letter-spacing: 0;
}
I have the following structure for my CSS:
index.html
css
--fonts
----roboto
------roboto-italic-demo.html
------roboto-italic-webfont.woff
------roboto-italic-webfont.woff2
------stylesheet.css
--main.css
stylesheet.css contains the following CSS
#font-face {
font-family: 'robotoitalic';
src: url('roboto-italic-webfont.woff2') format('woff2'),
url('roboto-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
roboto-italic-demo.html is a demo page with the entire alphabet characters displayed using font-family: 'robotoitalic';. Here the g appears like it should.
main.css contains the following css
#font-face {
font-family: 'roboto';
src: url('fonts/roboto/roboto-bolditalic-webfont.woff2') format('woff2'),
url('fonts/roboto/roboto-bolditalic-webfont.woff') format('woff');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: 'robototest2';
src: url('fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
url('fonts/roboto/roboto-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
index.html includes the main.css stylesheet. Using font-family: 'roboto'; font-style: italic; cuts off the right side of the g character. using font-family: 'robototest2'; cuts the right side of the g character as well.
Here's what I tried in order to fix the issue:
Redownload roboto-italic-webfont.woff && roboto-italic-webfont.woff2
Put "Comic Sans MS" as a fall back to make sure I was actually using roboto or robototest2
Added letter-spacing
Placed the g character within a span with padding
edit:
This question was marked as duplicate. The question linked referred to text protruding from its container, where as this one is about a character being cut-off no matter its position within any tag. For example, this html
<p><em>This g is being cut off on its right side</em></p>
results in
I had the same issue, also with Roboto, italic at regular weight. The version of Roboto I was using was self hosted and downloaded from Font Squirrel.
I tried the Google hosted version of Roboto, and it rendered the "g" correctly, so I figured there must be something off with my version of the font. I found this answer on a separate Stack Overflow issue: https://stackoverflow.com/a/15976457/1786681 which recommended uploading your own ttf of the font to Font Squirrel's webkit generator, selecting the "Expert" option, and leaving all the defaults except changing the "Em Square Value" to "2162". I downloaded the .ttf file of Roboto from Google and went through these steps and voila! My italic "g"s are now rendering beautifully!
The Droid Serif font from Google web fonts has the following styles:
DroidSerif.ttf
DroidSerif-Bold.ttf
DroidSerif-BoldItalic.ttf
DroidSerif-Italic.ttf
I would like to use the #font-face CSS declaration to import all of these styles under the "Droid Serif" font-family and use the font-weight attribute to specify if I want bold and/or italic, instead of having to import each of them individually under a different font-family like:
#font-face {
font-family: 'Droid Serif';
src: url('../fonts/DroidSerif.ttf');
}
#font-face {
font-family: 'Droid Serif Bold';
src: url('../fonts/DroidSerif-Bold.ttf');
}
#font-face {
font-family: 'Droid Serif BoldItalic';
src: url('../fonts/DroidSerif-BoldItalic.ttf');
}
#font-face {
font-family: 'Droid Serif Italic';
src: url('../fonts/DroidSerif-Italic.ttf');
}
Is this possible?
P.S. I have tried each of Google web font's importing techniques and none of them work for IE 9.
This article helps explain bulletproof use of #fontface. Read down and you'll find something to help with IE.
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
I personally use font squirrel and reference the various files types to keep all the browsers happy. I'm not sure you can do what your asking, as far as i know you can't.
This also helps explain font weights for #fontface - Unless the font specifies that it's at a certain weight, then you wouldn't be able to change that. http://css-tricks.com/watch-your-font-weight/
I'm trying to simply embed a font that I have uploaded to my server.
Everything is being loaded correctly, but the wrong font is being displayed. I know this is happening because when I remove the #font-face code the rendered HTML font changes.
Here's my code, I've played around with so many different things in the last hour so shout out whatever you think might work. I've also tried .TTF files.
#font-face {
font-family: Joan;
src: url("../fonts/joan.otf") format('font/opentype');
}
body {
background: url('../images/bg.gif');
font-family: Joan;
}
http://www.fontsquirrel.com/fontface/generator
Wins for me so far in my related adventures.
Here's a website I'm developing with it as we speak: http://bigballoon.businesscatalyst.com/
You may have to put the font name in quotes. Also, for MSIE compatibility, you'll need to convert the font to .eot format. Here's "bulletproof" #font-face as per paulirish.com. You may need to adjust depending on full/postscript font name:
#font-face {
font-family: 'Joan';
src: url('../fonts/joan.eot');
src: local('Joan Regular'), local('Joan'),
url('../fonts/joan.otf') format('opentype');
}