How to use fonts on my Site?

Asked

Viewed 1,432 times

3

Hello, I always used Google fonts on my websites, but I came across a project that has fonts that do not exist on Google Fonts. Can I use any external source? And how? (I’m sorry if there’s ever been a similar question, but I couldn’t find one that would take away all my doubts.)

I also need to know about paid fonts and so on, if I can use any source or I may have some problem with copyright.

I can also download some font on my computer and import it to Google Webfonts, for example?

2 answers

7


You can import the font into your project using CSS

@font-face {
    font-family: 'museo300';
    src: url('../fonts/museo300-regular-webfont.eot');
    src: url('../fonts/museo300-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museo300-regular-webfont.woff2') format('woff2'),
         url('../fonts/museo300-regular-webfont.woff') format('woff'),
         url('../fonts/museo300-regular-webfont.ttf') format('truetype'),
         url('../fonts/museo300-regular-webfont.svg#museo300') format('svg');
    font-weight: normal;
    font-style: normal;
}

Remembering that some fonts are paid and so it is not possible to make the conversion to all formats.

There are several sites that convert one type of source to all others.

  • So I can download the source I need from any site, put it in a folder of my site and import it into css, that’s it?

  • That, if you only have the font in a certain format, you can use the site font Squirrel, it converts free fonts for all other required types

1

You can import through Google Webfonts: This is a classic example of application:

<html> 
<head> 
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie:regular' rel='stylesheet' type='text/css'> 
<style>
h1 { 
     font-family: 'Reenie Beanie', serif; 
     font-size: 48px; 
} 
</style> 
</head> 
<body> 
    <h1>Seu texto vai aqui.</h1> 
</body> 
</html>

The fonts you can get through the link https://www.google.com/fonts/

  • Right. But the fonts I need don’t exist on Google Webfonts. I can download a font on my computer and import it on Google Webfonts, that’s it?

  • 1

    In this case, you can do as the other answer, just passed you as alternative!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.