Problem using 'Google Fonts'

Question

Problem using 'Google Fonts'

Navigation

#1 by (3 votes)
#2 by (0 votes)

11

I would like to use a Google source without needing an Internet connection. I saw that @font-face has this power. Just drop the font in one of the formats (I preferred .EOT because it is also accepted by IE Browser) and declare it 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 you should just call font-family , obviously, with the name declared in @font-face :

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

However, I still can not enjoy the VT323 font. The above codes are original to my project. Here is the structure of the file directories (additional information):

css css-font-face

asked by anonymous 13.02.2014 / 21:12

2 answers

0

Have you tried the IcoMoon?

It has great features for editing and downloading font files. I use primarily to create icons as fonts but I believe they can be used as fonts for writing texts (well, at worst you'll have to "draw" the letters you'll need).

Have good examples and maybe you can use as a reference.

14.02.2014 / 14:40

An image with display: none is loaded? Do you consume data? Divide a String dynamically based on screen size

score 3 · Accepted Answer

SkyFonts lets you sync GoogleFonts fonts with your Desktop.

In Mac OS X SkyFonts downloads the fonts to the ~ / Library / Application Support / skyfonts-google folder and you can copy it to the / css / fonts folder of your site.

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

Now to the VT323 problem. The procedure below I tested on 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, place 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 source with your Desktop using SkyFonts.