Fórum Como adicionar fontes #479755

21/05/2014

0

Front-end

estou tentando acompanhar esse tutorial que ensina a fazer um menu, somente com html e css, porem ele cita que deve baixar uma fonte, como posso adicionar uma fonte ao projeto?
Claudio Aguiar

Claudio Aguiar

Responder

Posts

21/05/2014

Marisiana Battistella

Poderia postar o link do tutorial?
Responder

Gostei + 0

21/05/2014

Joel Rodrigues

Você pode utilizar o recurso @font-face das CSS3, que lhe permite importar fontes a partir de arquivos externos.
Responder

Gostei + 0

22/05/2014

Raphael Souza

Veja este site. O Majour explica os princípios e como utilizar a chamada @font-face do CSS3.
Responder

Gostei + 0

22/05/2014

Claudio Aguiar

Poderia postar o link do tutorial?


tinha esquecido totalmente, é esse aqui:

[url]http://designshack.net/articles/css/creating-a-fun-animated-navigation-menu-with-pure-css/[/url]

Joel, da uma olhada nele, pois tentei fazer atraves do mesmo, tem esse comando que citou.
Responder

Gostei + 0

22/05/2014

Claudio Aguiar

Veja este site. O Majour explica os princípios e como utilizar a chamada @font-face do CSS3.


em portugues é bem melhor para entender, vou ver se consigo revolver essa questão, obrigado.
Responder

Gostei + 0

22/05/2014

Raphael Souza

Veja este site. O Majour explica os princípios e como utilizar a chamada @font-face do CSS3.


em portugues é bem melhor para entender, vou ver se consigo revolver essa questão, obrigado.


;)
Responder

Gostei + 0

23/05/2014

Claudio Aguiar

Poderia postar o link do tutorial?


Marisiana, viu o tutorial?
Responder

Gostei + 0

23/05/2014

Claudio Aguiar

mais uma vez, testei com o tutorial acima, o primeiro que citei, mudei nome referente a fonte, mas não deu certo:

html


<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="description">
		<title>MENU</title>
 
  
		<link rel="stylesheet" media="screen" href="estilo.css">
  
		<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<ul id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Work</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</body>
	

</html>


eu baixei dois arquivos de fonte: 3Dumb, 2Dumb
modifiquei os nomes e nada
css


* {
   padding: 0;
   margin: 0;
}
 
body {
   background: #f4f1e5;
   color: #544738;
   font-family: helvetica, sans-serif;
}

ul li {
    float: left;
    list-style: none;
    margin-right: 1em;
    font-family: 'KulminoituvaRegular', helvetica, sans-serif;
    font-size: 25px;
    padding: 12px; 
}
 
li a {
    color: #544738;
    text-decoration: none;
    float: left;
}
 
li a:hover {
    color: #7eb9be;
}
 
li a:hover {
    color: #7eb9be;
}

@font-face {
    font-family: 'KulminoituvaRegular';
    src: url('kulminoituva-webfont.eot');
    src: local('‚ò∫'), url('kulminoituva-webfont.woff') format('woff'), url('kulminoituva-webfont.ttf') format('truetype'), url('kulminoituva-webfont.svg#webfontHNAi9IoX') format('svg');
    font-weight: normal;
    font-style: normal;
}
Responder

Gostei + 0

23/05/2014

Raphael Souza

mais uma vez, testei com o tutorial acima, o primeiro que citei, mudei nome referente a fonte, mas não deu certo:

html


<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="description">
		<title>MENU</title>
 
  
		<link rel="stylesheet" media="screen" href="estilo.css">
  
		<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<ul id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Work</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</body>
	

</html>


eu baixei dois arquivos de fonte: 3Dumb, 2Dumb
modifiquei os nomes e nada
css


* {
   padding: 0;
   margin: 0;
}
 
body {
   background: #f4f1e5;
   color: #544738;
   font-family: helvetica, sans-serif;
}

ul li {
    float: left;
    list-style: none;
    margin-right: 1em;
    font-family: 'KulminoituvaRegular', helvetica, sans-serif;
    font-size: 25px;
    padding: 12px; 
}
 
li a {
    color: #544738;
    text-decoration: none;
    float: left;
}
 
li a:hover {
    color: #7eb9be;
}
 
li a:hover {
    color: #7eb9be;
}

@font-face {
    font-family: 'KulminoituvaRegular';
    src: url('kulminoituva-webfont.eot');
    src: local('‚ò∫'), url('kulminoituva-webfont.woff') format('woff'), url('kulminoituva-webfont.ttf') format('truetype'), url('kulminoituva-webfont.svg#webfontHNAi9IoX') format('svg');
    font-weight: normal;
    font-style: normal;
}


Estou achando a montagem desse seu @font-face muito estranha.
Segue um exemplo prático de como usar o parâmetro src:
Ps: exemplo a seguir com a font do Font Awesome

/* declaro o font-face */

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* uso a fonte importada */

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Responder

Gostei + 0

23/05/2014

Claudio Aguiar

não consegui entender bem, vc viu o tutorial?

vou desistir desse, hehehe
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar