I have a bilingual site using i18n. i18n attaches classes to the and tags of the site when it renders. For example, I have:
<html class="en">
<body class="i18n-en">
</body>
</html>
And when the user switches languages, the following renders:
<html class="ar>
<body class="i18n-ar">
</body>
</html>
I've created a LESS file which programmatically loads a different font to replace the English default font when the Arabic version of the site loads, as follows:
body.i18n-en {
#font-face {
font-family: 'DinAlternateBold';
src: url('../fonts/din-alternate-bold.ttf') format('truetype');
}
}
body.i18n-ar {
#font-face {
font-family: 'DinAlternateBold';
src: url('../fonts/Harmattan-Regular.woff') format('woff');
}
}
Note that I am calling "Harmattan-Regular.woff" with the same variable name as "din-alternate-bold.ttf", so that the replacement of all instance of DinAlternateBold on the site is automatic.
However, it is not working. Whichever font is declared later in the LESS file is getting loaded to the page, regardless of the class of the body. In the case I presented above, both the Arabic and English versions of the site are loading Harmattan-Regular.woff.
Is there something fundamental about how fonts behave in CSS/LESS that I'm missing? If so, what would be a proper way to achieve the effect I'm looking for?
It should be noted that each font does load properly when used alone—it is only in combination that I'm running into problems.
You can try it like this:
#font-face {
font-family: 'din-alternate-bold';
src: url("../fonts/din-alternate-bold.eot?-gqzqge");
src: url("../fonts/din-alternate-bold.eot?#iefix-gqzqge") format("embedded-opentype"),
url("../fonts/din-alternate-bold.ttf?-gqzqge") format("woff"),
url("../fonts/din-alternate-bold.ttf?-gqzqge") format("truetype"),
url("../fonts/din-alternate-bold.svg?-gqzqge#din-alternate-bold") format("svg");
font-weight: normal;
font-style: normal
}
body.i18n-ar {
font-family: 'din-alternate-bold';
}
You can try to generate your font here for easier and faster way.
Related
I have some local fonts I want to use in my project. I've read a few tutorials and questions on this, and I'm following the reccomendations I've seen, but my fonts are not showing up properly in the browser. I am using webpack 5. In my webpack config:
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(woff|woff2|ttf)$/,
use: {
loader: "url-loader",
},
},
]
}
}
I have a bunch of .tff font files in my src/assets/fonts/ directory. I have a .scss file for global styles. In there, I define the font names and I want to use, and where webpack should find them:
#font-face {
font-family: "InterRegular";
src: url("../assets/fonts/Inter-Regular.ttf") format("truetype");
font-display: swap;
}
#font-face {
font-family: "InterMedium";
src: url("../assets/fonts/Inter-Medium.ttf") format("truetype");
font-display: swap;
}
#font-face {
font-family: "InterSemiBold";
src: url("../assets/fonts/Inter-SemiBold.ttf") format("truetype");
font-display: swap;
}
// etc
I'm fairly sure webpack is finding these, because if I get the path to the file wrong, webpack errors. I then try to apply the font:
html,
body {
font-family: "InterSemiBold", sans-serif;
}
There are no errors, but the font does not get applied to the page. When I look in my network tab, I can see that a font file is indeed being loaded:
But this is clearly not the InterSemiBold font. Regardless of what font I'm using, this strangely-named .tff file always shows this same, seriffed font.
Looking at the computed value of an element, I can see that the browser is reading the "InterSemiBold", sans-serif value of the font family, but still defaulting to Arial:
I have also tried loading in fonts using the file-loader with webpack, but that makes no difference, and many recommend using url-loader instead.
What am I doing wrong here? Why is my font not being loaded in and applied?
Your dev tools screenshot indicates your actual page/app style sheet expects the font-family name to be 'Inter'.
So you don't need different family names for each font-weight
and change your #font-face rules to something like this:
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('../assets/fonts/Inter-Regular.ttf') format('truetype')
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
src: url('../assets/fonts/Inter-Medium.ttf') format('truetype')
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype')
}
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url('../assets/fonts/Inter-Bold.ttf') format('truetype')
}
Your #font-face rules should include a font-style value.
For italic styles you would change it to font-style: normal.
The font-url must use the exact file name of a font style (just a note, as some automatic font loaders rename the filenames internally or load updated files directly from Google - resulting in filenames like this "inter-v11-latin-800.ttf").
Since a browser can't automatically tell which intermediate weight would be e.g 'semi-bold' or 'light', you add specific numeric font-weight values which can be used to map all font-weights to different selectors like this:
body{
font-family:Inter;
font-size:16px;
}
.medium{
font-weight:500;
}
.semibold{
font-weight:600;
}
strong, h1, h2,
.button{
font-weight:700;
}
You might also double check your main css – it might also contain a separate #font-face declaration.
If everything is working fine, you should see the .tff files in dev tools just as defined in #font-face urls (e.g. "Inter-Regular.ttf")
Still not working?
Try to open the font via absolute URL in your browser.
Font file connection test example
Provided your compiled folder structure looks something like this:
the final URL is "myapp.com"
the main css is located under URL "myapp.com/css/main.css"
font files are located (at least according to your css/compiling code) in directory URL "myapp.com/assets/fonts/"
the actual font files should be available (downloadable) under URL
"myapp.com/assets/fonts/Inter-Regular.ttf"
If this doesn't work – you need to fix the URLs in your #font-face rule.
This especially important, if assets are copied/assembled during a compiling process to a new directory – so previously paths/URLs might not be "automagically" fixed.
Another cause might be inlined css – so the css becomes part of the compiled HTML <head> or <body> – relative paths/URLs might not work anymore => absolute paths could fix this (... albeit, any decent auto inlining script should be smart enough to translate relative to absolute URLs).
Compiled css
The final css might also include some overriding rules.
So check the finally compiled css in devtools and search for any #font-face rules – as a last resort: add a !important keyword to a font src to enforce the desired URL.
Font files might be corrupt?
Since the "inter" is available as free google webfont you could get a "fresh" copy via google webfonts helper
I was having the same problem as you with Webpack 5 and a custom local font, none of the above suggestions worked, but I just solved it, here's how: When I went to Google Fonts the only option was to download a TTF and that's what I had been trying to use. So, I visited the google-webfonts-helper website which gives you the code to put in your CSS file to make sure I was doing it correctly, and it instead had me download a WOFF and WOFF2 of the font. When I used these files the fonts rendered properly in my Chrome browser right away. I then found a few other forums from the past where people had issues with Chrome rendering TTF's and solved them by switching to WOFF formats. I don't know exactly why this works but it did.
I want to use a custom font in the header of the pdf file.
Using the font name only works properly on systems where that font exists
Accepts the text inside the body of the font using the following code, but does not work for headers
I do not want to use Google fonts and I want to use my own custom fonts
##font-face {
font-family: 'hpf';
font-style: normal;
font-weight: normal;
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAPAIAA...) format("truetype");
}
* {
font-family: 'hpf' !important;
}
I accomplished this using woff, woff2 and ttf files, but haven't tested it with base64. However, if you can't make it work with base64 format, you can choose to convert to the other formats. If this is the case, you could make use of https://onlinefontconverter.com (please, check this link), or any other conveter you prefer.
Here is a sample HTML file I have tested in my project (to clarify, I just changed the font name I used to MyFont):
<!DOCTYPE html>
<head>
<style>
#font-face { font-family: 'MyFont'; src: url('../../../Content/fonts/MyFont.woff2') format('woff2'),
url('../../../Content/fonts/MyFont.woff') format('woff'),
url('../../../Content/fonts/MyFont.ttf') format('truetype') }
.custom-font-text {
font-family: 'MyFont' !important;
}
</style>
</head>
<div>
Normal text <div class="custom-font-text">Text with custom font</div>
</div>
Please, also pay attention to the URLs, as they're crucial to make this approach work. In my case, font files are stored inside a folder called fonts, which is inside a folder called Content, in project's root folder (/Content/fonts). The final So I have to use "../" each time I want to go backwards from my /Views/Documents/PDF folder, where the header is placed.
EDIT (Base64 testing):
Tested successfully using base64. Here is my code:
#font-face {
font-family: 'MyFont';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAAOA...) format('truetype');
}
.custom-font-text {
font-family: 'MyFont' !important;
}
As far as I can see, the only difference with yours is that I'm using simple quotes on format("truetype"), but seems to have no real impact, as it also works with double quotes.
As your problem might be on the base64 encoded data, I would recommend you to generate the base64 using a tool like this:
https://www.fontsquirrel.com/tools/webfont-generator
Checking these options: ttf (as FontFormats), Keep existing (as TrueType Hinting) and Base64 Encode (as CSS) will generate a complete kit to test your font. For your information, please, have in mind that this tool requires to accept an agreeement clause which states that your font is legally eligible for web embedding.
Check this post to read a complete walkthrough to properly generate the kit and more useful info:
https://www.htmlgoodies.com/beyond/webmaster/serving-up-base64-encoded-custom-fonts.html
I am using #font-face to try and get the font 'Archisto' to load on my webpage. I am a newbie on building web pages and using #font-face. I followed all the steps on several tutorials and looked through several threads on here, but I can not get the font to load.
I have the css file uploaded in the folder http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/css/Archistico.css
I have the font file uploaded in the folder http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF
The #font-face code in the .css file looks like this:
#font-face {
font-family: Archistico;
src: url(http://www.unfoldmyworld.com/wp-content/themes/ashe/assets/fonts/FONT_11.TTF);
}
I am calling the font with custom CSS that looks like this:
.page-content h5{
font-family: 'Archistico' !important;
font-size: 50px !important;
display: inline !important;
color: #231400 !important;
}
The page I am trying to get this to work on is: www.unfoldmyworld.com
I would really appreciate your help!
1- Add to the head section of web page.<link href="//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico" rel="stylesheet" type="text/css"/>
-2 Using #import CSS directive, put the following line in add to your css file.(http | https)
#import url(//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico);
-3 Use font-face declaration Fonts.(http | https)
#font-face {font-family: "Archistico"; src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot"); src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff") format("woff"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.svg#Archistico") format("svg"); }
Let me know if this works for you :) Thanks
Have you tried it with a relative url?
I'm thinking of a CORS (Cross-Origin Resource Sharing) problem.
#font-face {
font-family: Archistico;
src: url('../fonts/FONT_11.TTF');
}
This is a general issue, and it seems like there is a solution.
Problem is that web fonts shows choppy in chrome. The solution should be to move the .svg call before the .woff call. Explained here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome and here: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
Problem is, that I'm using google web fonts, and importing the font like this:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
And I dont know, and cannot find out, how to import it with the #font-face css tag instead of the above. I've tried, but got stuck since google only offers the font in ttf and not svg or woff.
Hope you can help.
You'll have to host the fonts yourself if you want to apply this fix.
Your Google Fonts link is a request for a stylesheet, that gets dynamically built based on the parameters you supply - and on browser detection. For your example link:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
If you actually make the request yourself using curl:
$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic
this is what gets sent back:
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 400;
src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 700;
src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 400;
src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 700;
src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
The simplest thing to do is to go back to Google Web Fonts, download the font in question by going here and clicking the download arrow.
Then you can use the suggested fix from here, referencing the font files you downloaded:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
Did you do a proper reset of all styles?
Your inconsistent rendering experience can be caused by the browser defaults.
A reset.css sets all Elements back to default-values, this way cross-browser inconsistencies are reduced. There are many examples for reset.css, one of the Most popular is meyerweb reset css.
Another way to reduce inconsistency is to use normalize.css.
The difference between the two approaches in short is, reset.css just resets all browser specific styles while normalize.css has a wider scope by creating cross-browser defaults.
Differences between both are explained here by the developer of normalize.css.
If all those links do not help make sure that you set the font-weight always right an import all necessary font-weights.
You can read about font weights here: http://css-tricks.com/watch-your-font-weight/
You should also apply this technique when you use normalize.ccs because it doesn't reset the font-weight as rest.css does.
Add this to your stylesheet for each element.
opacity: .99;
For example -
p, li {
opacity: .99;
}
I have no idea why this works but it did.
I'm sure I'm missing something really straight forward. Been using a single custom font with normal font face:
#font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
All works fine when I use it but if I want to add another custom font what do I do? I've tried separating by comma the next one or adding a whole other font face but can't get the second font working.
You simply add another #font-face rule:
#font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
#font-face {
font-family: CustomFont2;
src: url('CustomFont2.ttf');
}
If your second font still doesn't work, make sure you're spelling its typeface name and its file name correctly, your browser caches are behaving, your OS isn't messing around with a font of the same name, etc.
If you are having a problem with the font working I have also had this in the past and the issue I found was down to the font-family: name. This had to match what font name was actually given.
The easiest way I found to find this out was to install the font and see what display name is given.
For example, I was using Gill Sans on one project, but the actual font was called Gill Sans MT. Spacing and capitlisation was also important to get right.
Hope that helps.
I use this method in my css file
#font-face {
font-family: FontName1;
src: url("fontname1.eot"); /* IE */
src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */
}
#font-face {
font-family: FontName2;
src: url("fontname1.eot"); /* IE */
src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */
}
#font-face {
font-family: FontName3;
src: url("fontname1.eot"); /* IE */
src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */
}
Check out fontsquirrel. They have a web font generator, which will also spit out a suitable stylesheet for your font (look for "#font-face kit"). This stylesheet can be included in your own, or you can use it as a template.
You can use multiple font faces quite easily. Below is an example of how I used it in the past:
<!--[if (IE)]><!-->
<style type="text/css" media="screen">
#font-face {
font-family: "Century Schoolbook";
src: url(/fonts/century-schoolbook.eot);
}
#font-face {
font-family: "Chalkduster";
src: url(/fonts/chalkduster.eot);
}
</style>
<!--<![endif]-->
<!--[if !(IE)]><!-->
<style type="text/css" media="screen">
#font-face {
font-family: "Century Schoolbook";
src: url(/fonts/century-schoolbook.ttf);
}
#font-face {
font-family: "Chalkduster";
src: url(/fonts/chalkduster.ttf);
}
</style>
<!--<![endif]-->
It is worth noting that fonts can be funny across different Browsers. Font face on earlier browsers works, but you need to use eot files instead of ttf.
That is why I include my fonts in the head of the html file as I can then use conditional IE tags to use eot or ttf files accordingly.
If you need to convert ttf to eot for this purpose there is a brilliant website you can do this for free online, which can be found at http://ttf2eot.sebastiankippe.com/.
Hope that helps.