Foro

 

10 posts

How can I embed fonts on a website?

18/11/2018 a las 18:11

I know Google Fonts has codes you can copy but I want to use a font that isn't on their site. What is the correct font format and html coding to be able to do this?


18/11/2018 a las 18:32



10/04/2019 a las 21:56

You can use CSS to add the local font in your HTML
Here is an example of including the font in HTML

<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"; ) ;
}

body { font-family: "Bitstream Vera Serif Bold", serif }
</style>

Editado 2 veces. Última edición el 10/04/2019 a las 21:57 por Afflospark


12/03/2020 a las 19:36

I'm trying to embed the tesla font. The CSS seems straight forward but what code and what words on the font source page to plug in is confusing still.

https://www.dafont.com/search.php?q=tesla

@font-face {
font-family: "tesla";
src: url(https://www.dafont.com/search.php?q=tesla);}

Am I close? The Nav Bar says: Tesla by Dies in Techno > Sci-fi


13/03/2020 a las 18:12

That won't work.

Download Tesla from https://www.dafont.com/tesla.font to your computer. You can use TTF or OTF as webfonts but it would be better if you have it in WOFF and also EOT. Online font converters usually provide CSS codes that you will have to insert into your webpage. Once you have your webfonts, upload them to your web server and then edit your HTML page and upload it also to your web server. If you do things right, you will see the font displayed in your webpage.

See the links provided by marty666


13/03/2020 a las 22:08

Hey thanks for your reply,
I am gonna try and do that download. Wasn’t an option with the computer I was using. I appreciate the tip though. I ended up using a generator and importing the file which is better or worse for responsiveness, I’m not sure yet.

Here is the project I am working on

https://codepen.io/Magopolis/full/eYNMZzv

I’ve just been using bootstrap-type code so far but it seems like every site gives you its own shapes of linkage. But the point is to learn and have fun. Wrestling with github today to embed an image from my phone.

Thanks again,
Lemme know if you have suggestions for my pen. I already have credit for it but trying to make it awesome.


14/03/2020 a las 08:48

Looks good but you are using images in all instances of Tesla on your page.


When you are done with your page, I suggest for you to show some love to the author of the font. See font author's note at https://www.dafont.com/tesla.font


15/03/2020 a las 06:05

Yeah, I’m not really able to download anything right now. I was hoping to find a site for that. When i have a better machine I’ll probably revisit it. Otherwise I would like to import the font into my code. Maybe rewrite the texts. Thanks again.


27/03/2020 a las 12:50

Salut à tous, est ce que quelqu'un peu m'aider. Je souhaite améliorer la vitesse de ce site https://hiphopcorner.fr/rap-francais/
Il faut apparemment supprimer les google fonts mais je ne sais pas comment m'y prendre.
Merci

Editado 2 veces. Última edición el 30/03/2020 a las 12:41 por Rodolphe


30/03/2020 a las 21:19




Huso horario CEST. Ahora son las 12:41


 
Política de Privacidad  -  Contacto