The situation is as follows. In the gulp assembly there is a task that matches the fonts. It works out normally in the assembly a folder with the necessary font files appears. But the question arose in another - how to connect them to the project? Before working with gulp, I did it for example

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

But now the style files are connected with gulp-ohm (there’s no need to specify a link) and I don’t quite understand how to tie them to the project. How to act in such a situation? Maybe they like css \ js files should be combined with the concat plugin into 1 file and in the head set the route to its location?

The code of the task that collects the fonts:

 var gulp = require('gulp'); gulp.task('fonts', function() { gulp.src('node_modules/bootstrap/fonts/*{ttf,woff,woff2,svg,eot}') .pipe(gulp.dest('./build/src/fonts/')) gulp.src('./src/fonts/open_sans/*ttf') .pipe(gulp.dest('./build/src/fonts/open_sans')) });
  • Please add the task code for fonts, please. - Mikl
  • @Mikl added code to the question - Iga
  • @Iga Do you use sass preprocessor? - Denisoed
  • @Denisoed yes, Sass - Iga
  • @Iga github.com/agragregra/optimizedhtml-start-template I think this will help you more! There everything is already done for you - Denisoed

1 answer 1

The link should be specified anyway. Simply your task transfers the font files to the build directory ./build/src/fonts/ . And now you need to specify the relative path to the fonts, where you connect them (in css, of course), like this:

 @font-face { font-family: 'fontName'; src: url('../fonts/fontName.eot'); src: url('../fonts/fontName.woff') format('woff'), url('../fonts/fontName.ttf') format('truetype'), url('../fonts/fontName.svg') format('svg'), url('../fonts/fontName.eot') format('embedded-opentype'); font-weight: 500; font-style: normal; }

Previously, strictly speaking, you also connected not the fonts, but the css file with the fonts.

  • That is, in the head for each file open_sans'a need to register a link? The code that you gave can be used in sass? - Iga
  • one
    It is better to create a separate css file for fonts.css fonts, register all this and connect it to your site. It is possible in the head, but I think you should set up the assembly of your css using gulp. - Mikl
  • did not quite understand. here is the current config of the gulpa I work with. github.com/jokep5/Simple-gulp-config you offer to take all the font files in the assembly, do concatenation and write them into one .css file? - Iga
  • one
    No no no david blaine! How do fonts connect? - they are written in css. To do this, specify the path to the font in css. What makes your gulp - it shifts fonts from one folder to another. So you only need to correctly specify the new paths in your css. http://htmlbook.ru/css/font-face - Mikl
  • Earned.Thank you) - Iga