How to include webfont for different languages - css

I need to change the font for my website. I have the webfont files (.eot, woff,ttf,woff2,svg files) which I need to include in the website. But I have three sets of font files for the same font. One set each for English, Spanish and Portuguese language. I did it for English language using #font-face. But how do I do it for other two languages? Please advise. Thanks

There is no shortcut to this that I come to know. You need to add the font-face rules for each one of those sets of files. Something which could reduce your effort would be to use SASS variables as below. ('webfont' refers to the font you decide to use).
$font-prefix: 'webfont';
$font-reg: "#{$font-prefix}_reg-webfont";
$font-bold: "#{$font-prefix}_bld-webfont";
$font-black: "#{$font-prefix}_blk-webfont";
$font-light: "#{$font-prefix}_light-webfont";
$font-medium: "#{$font-prefix}_med-webfont";
$font-thin: "#{$font-prefix}_thin-webfont";
$font-reg-it: "#{$font-prefix}_reg_it-webfont";
$font-bold-it: "#{$font-prefix}_bld_it-webfont";
$font-black-it: "#{$font-prefix}_blk_it-webfont";
$font-light-it: "#{$font-prefix}_light_it-webfont";
$font-medium-it: "#{$font-prefix}_med_it-webfont";
$font-thin-it: "#{$font-prefix}_thin_it-webfont";
//Normal style fonts
#font-face {
font-family: "Brandon";
src: url("#{$font-reg}.eot");
src:
url("#{$font-reg}.eot?#iefix") format("embedded-opentype"),
url("#{$font-reg}.woff2") format("woff2"),
url("#{$font-reg}.woff") format("woff"),
url("#{$font-reg}.ttf") format("truetype"),
url("#{$font-reg}.svg#svgFontName") format("svg");
font-weight: 400;
font-style: normal;
}
.....continue similarly for various font-weights and styles
=================For spanish===============
$font-prefix: 'webfont';
$font-reg: "#{$font-prefix}_reg_es-webfont";
$font-bold: "#{$font-prefix}_bld_es-webfont";
$font-black: "#{$font-prefix}_blk_es-webfont";
$font-light: "#{$font-prefix}_light_es-webfont";
$font-medium: "#{$font-prefix}_med_es-webfont";
$font-thin: "#{$font-prefix}_thin_es-webfont";
$font-reg-it: "#{$font-prefix}_reg_it_es-webfont";
$font-bold-it: "#{$font-prefix}_bld_it_es-webfont";
$font-black-it: "#{$font-prefix}_blk_it_es-webfont";
$font-light-it: "#{$font-prefix}_light_it_es-webfont";
$font-medium-it: "#{$font-prefix}_med_it_es-webfont";
$font-thin-it: "#{$font-prefix}_thin_it_es-webfont";
//Normal style fonts
#font-face {
font-family: "Brandon_es";
src: url("#{$font-reg}.eot");
src:
url("#{$font-reg}.eot?#iefix") format("embedded-opentype"),
url("#{$font-reg}.woff2") format("woff2"),
url("#{$font-reg}.woff") format("woff"),
url("#{$font-reg}.ttf") format("truetype"),
url("#{$font-reg}.svg#svgFontName") format("svg");
font-weight: 400;
font-style: normal;
}
.....continue similarly for various font-weights and styles
Any other easy way, please feel free to post.Thanks

Related

Can't import fontawesome-webfont typography

I am trying to import a font (fontawesome version 4.4.0's webfont) I have located in a directory called 'fonts' inside my project:
I have read several StackOverflow posts and I'm trying to import it using #font-face inside css:
#font-face {
font-family: 'MyWebFont';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2') format('woff2'),
url('../fonts/fontawesome-webfont.woff') format('woff'),
url('../fonts/fontawesome-webfont.ttf') format('truetype'),
url('../fonts/fontawesome-webfont.svg#svgFontName') format('svg');
}
And then using it in the body:
body {
margin: 0;
padding: 0;
font-family: 'MyWebFont';
}
However, it's not loading:
Any idea on why is this happening? I can actually see the expected font inside the files...
Thank you in advance.
Edit:
In the network tab in my browser's developer tools I can see the follwing info:
.
In the 'Response' tab inside Network, I get "failed to load response data". Maybe the problem is there?
Edit2:
Other fonts are being loaded just fine. For example, 'Raleway' (which is very similar, but not exactly the same. Notice the difference in the 'l'):
I am trying to get this font (I think it's Adobe's 'Proxima Nova', the same used in Fontawesome's site, that's the reason of the name)...
I think the problem is that font awesome is only for icons, not text.
If you go to fontawesome.com and remove this line of code:
.fa, .fas {
font-family: "Font Awesome 5 Pro";
}
You will see all the icons that have the class fa and fas will be just a rectangle.
You also need to give every element other fonts like:
.fab {
font-family: "Font Awesome 5 Brands";
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}

How to make font variables that can be reused in scss

I am working on an Angular project and we use scss. We want to standardize our use of fonts throughout the application. For eg. Instead of using font-family: Arial everywhere it should be font-family: $arialFont.
In my current styles.css we have the following.
#font-face {
font-family: "Helvetica_Neue_Light";
src: url("./assets/fonts/eot/HelvNeueLight.eot");
src: url("./assets/fonts/eot/HelvNeueLight.eot")
format("embedded-opentype"),
url("./assets/fonts/woff/HelvNeueLight.woff") format("woff"),
url("./assets/fonts/tff/HelvNeueLight.ttf") format("ttf");
}
#font-face {
font-family: "Helvetica_Neue_Medium";
src: url("./assets/fonts/eot/HelvNeueMedium.eot");
src: url("./assets/fonts/eot/HelvNeueMedium.eot")
format("embedded-opentype"),
url("./assets/fonts/woff/HelvNeueMedium.woff") format("woff"),
url("./assets/fonts/tff/HelvNeueMedium.ttf") format("ttf");
}
#font-face {
font-family: "Helvetica_Neue_Bold";
src: url("./assets/fonts/eot/HelvNeueBold.eot");
src: url("./assets/fonts/eot/HelvNeueBold.eot")
format("embedded-opentype"),
url("./assets/fonts/woff/HelvNeueBoldfor.woff") format("woff"),
url("./assets/fonts/tff/HelvNeueBold.ttf") format("ttf");
}
#font-face {
font-family: "Helvetica_Neue_Light_Italics";
src: url("./assets/fonts/eot/HelvNeueLightItalic.eot");
src: url("./assets/fonts/eot/HelvNeueLightItalic.eot")
format("embedded-opentype"),
url("./assets/fonts/woff/HelvNeueLightItalic.woff") format("woff"),
url("./assets/fonts/tff/HelvNeueLightItalic.ttf") format("ttf");
}
These are simply used as font-family: 'Helvetica_Neue_Bold' or font-family: 'Helvetica_Neue_Light_Italics' in the other scss files. The disadvantage of this is whenever we need to change the font for the app we need to make a change in every single instance. So I need a way to assign each font family name to a variable and use it everywhere so that the next time there is a font change, i only have to change the value of variables in one place,
I have created a fonts.scss where I've put
$helvetica-neue-light: "Helvetica_Neue_Light";
$helvetica-neue-medium: "Helvetica_Neue_Medium";
$helvetica-neue-bold: "Helvetica_Neue_Bold";
$helvetica-neue-light-italics: "Helvetica_Neue_Light_Italics";
I imported it in the first file, styles.css and assigned the variables to font-family. But now I have to import fonts.scss in every single scss file, which is also troublesome. Is there another way to do this task? Please help
If you use sass, then you have to import the file where the variables are defined into every file where you want to use these variables.
An alternative is to use CSS variables. You can declare them in once place and reuse them without import.
styles.scss
:root
{
/** hard coded **/
--helvetica-neue-light: "Helvetica_Neue_Light";
--helvetica-neue-medium: "Helvetica_Neue_Medium";
/** or use sass variable**/
--helvetica-neue-light-italics: $helvetica-neue-light-italics;
}
component.scss
div
{
font-family: var(--helvetica-neue-light);
}
Stackblitz demo
Note: this will not work with IE

Custom Locally Stored Fonts (dev machine and server side): CSS?

Problem:
I'm attempting to use Abadi MT Condensed Extra Bold font. Unfortunately, I can't find any CDN's that provide this over an API. Is there something wrong with the css code that I'm using to pull in the fonts? I know for sure the stylesheet is being loaded.
Context
The font works when I have it turned on in my system's font book 100%, but not when disabled/removed -- but I understand that it's not practical to expect that every user is going to have that font. So given this, it does not work on an iPhone or Android device.
Am I better off finding a font in a CDN or, is it possible to make this work? Thanks!
Code:
****** fonts.css ********
#font-face {
font-family: 'serif';
src: url('../fonts/Abadi MT Condensed Extra Bold.eot');
src: local('☺'), url('../fonts/Abadi MT Condensed Extra Bold.woff') format('woff'), url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype'), url('../fonts/Abadi MT Condensed Extra Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
***** layout.pug *******
doctype html
html(lang='en')
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
meta(name='description', content='')
meta(name='author', content='')
title #{title}
//jquery
script(src='https://code.jquery.com/jquery-2.2.4.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js')
//shopify
script(src='http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js')
//custom cart
script(src="scripts/cart.js")
//popper
script(src='./vendor/popper/popper.min.js')
//bootstrap
script(src='./vendor/bootstrap/js/bootstrap.min.js')
//Favicons
link(rel='apple-touch-icon', sizes='57x57', href='/favicon/apple-icon-57x57.png')
......
......
// Bootstrap core CSS
link(href='vendor/bootstrap/css/bootstrap.min.css', rel='stylesheet')
//Gliphicons had to be pulled in separately
link(href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css', rel='stylesheet')
// Custom fonts for this template
link(href='./stylesheets/fonts.css', rel='stylesheet')
// Custom styles for this template
link(href='./stylesheets/template.css', rel='stylesheet')
Attempted Solutions
I've already attempted solutions like this. Also my CSS code used to not have the entire fonts.css file.
I was able to figure this out, posting for anyone else that has the same issue.
I found this blob to help
So now my final code is
#font-face {
font-family: AbadiBold;
src: url('../fonts/Abadi MT Condensed Extra Bold.ttf') format('truetype');
src:
url("../fonts/Abadi MT Condensed Extra Bold.woff") format("woff"),
url("../fonts/Abadi MT Condensed Extra Bold.otf") format("opentype"),
url("../fonts/Abadi MT Condensed Extra Bold.svg#filename") format("svg");
font-weight: 400;
font-style: normal;
}
* {
font-family: AbadiBold
}
h1, h2, h3, h4, h5, h6, .text-heading {
font-family: AbadiBold
}

Custom css font isn't loading

here is the page where I want to add custom font http://pgkweb.ru/temp/1/index.html
So the fonts are:
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot
And I call them from css (http://pgkweb.ru/temp/1/include/style.css):
/*FONTS*/
#font-face {
font-family: MyriadProCond;
src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}
*, body, p,h3,h4 {
font-family: 'MyriadProCond', Arial, sans-serif;
color: #fff;
}
But as I see in FireFox code explorer it doesn't works (line-through). But why?
Your webfonts are inside the "include" folder, as is the stylesheet, i.e. they are both in the same folder, so you have to erase the folder name from the file path in the links, like:
src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");
instead of
src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");
the same with all the other URLs
Seems like you are missing quotes around each url, the syntax is also a little off:
#font-face {
font-family: MyriadProCond;
src: url('include/MyriadProCondRegular/MyriadPro-Cond.eot');
src: url('include/MyriadProCondRegular/MyriadProCondRegular.woff') format('woff'), /* Путь к файлу со шрифтом */
url('include/MyriadProCondRegular/MyriadProCondRegular.ttf') format('truetype'),
url('include/MyriadProCondRegular/MyriadProCondRegular.otf') format('otf');
}
See here: https://css-tricks.com/snippets/css/using-font-face/
If this doesn't work, check that the URLs are correct and the fonts are being downloaded (no 404 errors in the network tab).

Merging multiple font files within one #font-face

I have the following code:
#font-face {
font-family: 'icomoon';
src:url('../fonts/icons/icomoon.eot?2hq9os');
src:url('../fonts/icons/icomoon.eot?#iefix2hq9os') format('embedded-opentype'),
url('../fonts/icons/icomoon.woff?2hq9os') format('woff'),
url('../fonts/icons/icomoon.ttf?2hq9os') format('truetype'),
url('../fonts/icons/icomoon.svg?2hq9os#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
now, the problem is that I'm forced to use multiple icon sets (from multiple files) and for my convinience and clean structure I want to have all those icons (from all the files) only within the one 'icomoon' font-face.
For example if:
../fonts/icons/icomoon.* includes icon-1 / icon-2 and icon-3
and
../fonts/icons/customicon.* includes icon-4 / icon-5
how can I include all of them to have within the
#font-face {
font-family: 'icomoon';
-- include multiple files --
}
div#selector { // will have con-1 / icon-2 / icon-3 / icon-4 / icon-5
font-family: icomoon;
}
is that possible at all?
I think that for this purpose you could use IcoMoon PLugin.
With it you can create a custom font combining FontAwesome with your icons and much more.

Resources