Problem using 'Google Fonts'

Question

Problem using 'Google Fonts'

Asked 10 years, 9 months ago

Viewed 1,395 times

11

I would like to use a Google source without needing Connection (internet). I saw that the @font-face has this power. Just download the source in one of the formats (I preferred the .EOT also accepted by IE Browser) and declared as follows:

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/VT323-Regular.eot');
  src: url('../fonts/VT323-Regular.eot?#iefix') format('embedded-opentype'),
       url(‘../fonts/VT323-Regular.ttf’) format(‘truetype’);
}

Where url is where the source file is located. And to make use of it one should only call the font-family, obviously, with the name stated in @font-face:

.home-text {
    font-family: 'VT323', cursive;
    text-align: center;
    font-size: 1.4em;
}

However, I still can’t enjoy the VT323 source. The above codes are original from my project. Below is the file directory structure (additional information):

estrutura de diretórios

Try to use all formats, this helps even compatibility

– Erlon Charles

2014/02/13 at 20:16
Tried to add the font-weight: 400 also in the .home-text?

– bfavaretto

2014/02/13 at 20:23
I tried it now and it didn’t change the scenery.

– Phellipe Lins

2014/02/13 at 20:34
Try to convert font to web fonts format, use this site to convert http://www.fontsquirrel.com/tools/webfont-generator

– Leandro Costa

2014/02/13 at 20:36
try using fonts/VT323-regula...' instead of'.. /fonts/VT323-regula...'

– George Moura

2014/02/13 at 20:39
@Leandro, I’ve used this site to convert from.ttf to.eot, it doesn’t make sense to convert again. George, didn’t change the scenario. There is a class in this same '.css' file that uses an external file at the same level as this source. The source of it was the way I 'replicated' in the doubt code.

– Phellipe Lins

2014/02/13 at 20:51
It works if you put the font in the same directory as the CSS file (and change the declaration font-face to reflect this)? What would be the situation where you would use this? Would it be possible to install the source on the system? If so, is it no longer practical that way? Which browser are you using?

– Alessandro Delgado

2014/02/13 at 21:30
Have you tried changing font names to small font and obviously updating the url? According to W3schools, capitalized fonts can have strange behaviors, especially in IE. I noticed that in the last declaration of the property src has ‘ instead of '. It may be nothing, but it maintains consistency. EDIT I just noticed that the source code has the name VT323-Regular.eot but the image with the directories has the name VT323-regular.eot. Change to reflect reality if it is not a misspelling when creating the image.

– josepostiga

2014/02/13 at 21:32
3

@josepostiga to w3schools is not a good reference

– Felipe Avelar

2014/02/14 at 12:18
I put the files in the CSS folder and made the appropriate changes including renaming them to lower case. No change in scenario. *** I think this is one of those obvious mistakes that is not easy to see... rsr

– Phellipe Lins

2014/02/14 at 21:03
Google Fonts detects the user agent when loading the fonts: Have you downloaded the code using more than one browser? Still, if the code is really the original, why does it have 'curved quotes' in it?

– Gustavo Rodrigues

2014/02/17 at 01:55
@Phellipelins recently solved a similar problem. The solution is in the Answers below. Anyway I copied and pasted your CSS into a file and made a hexdump -x and the character ' (plic) used in your solution in the section @font-face seems to be wrong.

– João Paraná

2014/02/18 at 13:26

Show 7 more comments

2 answers

3

the Skyfonts allows you to synchronize Googlefonts fonts with your Desktop.

On MAC OS X Skyfonts downloads the fonts to the ~/Library/Application Support/skyfonts-google folder and you can copy to the folder /css/fonts of your website.

Obviously you do not need to use Skyfonts, just download it. I use for convenience in managing Fonts on my Computers.

Now to the problem of VT323. The procedure below I tested in Chrome and Safari.

Create a css file in /css/vt323.css with the following content:

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: local('VT323'), local('VT323-Regular'), url(VT323-Regular.ttf) format('ttf');
}

In your HTML put the following lines of code in <head>:

<link href="/css/vt323.css" rel="stylesheet">
<style>
  body {
    font-family: VT323;
  }
</style>

Below is an illustration of how to search and sync the VT323 font to your Desktop using Skyfonts.

Usando o SkyFonts

But that would all be done locally?

– Paulo Roberto Rosa

2014/02/18 at 12:57
In my solution proposal we eliminate user dependency with an Internet connection to download fonts from a site such as http://fonts.googleapis.com. Recently I had to do this to prevent the page from freezing on an Intranet due to the drop of the link with the Internet.

– João Paraná

2014/02/18 at 13:14

Browser other questions tagged css css-font-face

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

by jean • **904** points · Answer 1 · 2014-02-14T13:40:18+00:00

Have you tried the Icomoon?

It has great features for editing and downloading files from sources. I use primarily to create icons as fonts but I believe it can be used as fonts to write texts (well, in the worst case scenario you will have to "draw" the letters you will need).

There are good examples and maybe you can use as a reference.