I'm trying to load google font to my webapp (angular based but not relevant) and I'm getting this error:
Failed to decode downloaded font: https://fonts.googleapis.com/css?family=Open+Sans
The relevant part of my webpack.config.js is:
loaders: [
{test: /\.less$/, loader: "style!css!less", exclude: /node_modules|bower_components/},
{test: /\.woff(2)$/, loader: "url?limit=10000&minetype=application/font-woff"}
]
and my style.less is:
#font-face {
font-family: "myFont";
font-style: normal;
src: url(https://fonts.googleapis.com/css?family=Open+Sans);
}
body {
font-family: "myFont";
}
My guess is that it is not really related to the webpack part but the font inclusion itself. Unfortunately I lack the knowledge to figure out where exactly is the problem.
I'd suggest you have a look at this article by Paul Irish from 2009 named Bulletproof #font-face syntax
It explains very well and in all detail how to get webfonts up and running across all (or at least all capable) browsers.
Another way is to use link tag to load the CSS. Then define the font in custom CSS.
Example:
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family:'Abel',Sans;
}
</style>
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 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');
}
I have recently need to use fonts from local application which were earlier referenced from http://fonts.googleapis.com/css?family=Open+Sans, earlier fonts were referenced in sass like :
#import url("https://fonts.googleapis.com/css?family=Maven+Pro");
I installed fonts from npm & imported in sass like:
#import url("../node_modules/typeface-maven-pro?family=Maven+Pro");
Now webpack is generating 21MB css which earlier was 320kb. As I supspected upon inspection I found fonts are embedded in css as hexadecimal like :
#font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: url(data:application/vnd.ms-fontobject;base64,h3cBAKF2AQACAAIABAAAAAILAwYDBQQCAgQBASwBAAAIAExQ7wIA4FsgAEAoAAAAAAAAAJ8BACAAAAAAhvcg1AAAAAAAAAAAAAAAAAAAAAAAAB4ATwBwAGUAbgAgAFMAYQBuAHMAIABMAGkAZwBoAHQAAAAMAEkAdABhAGwAaQBjAAAAGABWAGUAcgBzAGkAbwBuACAAMQAuADEAMAAAACwATwBwAGUAbgAgAFMAYQBuAHMAIABMAGkAZwBoAHQAIABJAHQAYQBsAGkAYwAAAAAAQlNHUAAAAAAAAAAAAAAAAAAAAAADAuoIAVbNAW9TAWcEFM3pjMl4WmfKaWN3hnx6JmO6ojRvSI1U6OiPDyQA0a+M0J9YQcEiqJaAbQHtU1iDq2Bnl7ejJ8rC41GlgOAY9I5OWoJSjiHI9DfkJpbKlOMkLprn1q4rVvWzbCf930p8703JJ0nHo31vHRYa4ebmnW+8zvx0RSUd2QcQKhRRo8nvU8UADxYMUJeXBpGj9aUg2Y3ZEO8tyX0zEQ8MFqgcOnR8pISExrfRL3Kn98z3gkfclmOhXwU+6M5ofsi1WApsIrGHO/rqog6zb5GuKGJqPCcnakQVQwmY1GfEOjxb7S46r4JgLa3OY2lM3fgsJ9aTZ064fU8mjZeQbdUAkJ8PsdL8B/tWQlQHFypDF97cLNa/WrONAi9AOGESW+kaQLHIzIDHRCcAZUFo7BTXwsgaANXHRc3rVvIA81wZ+yMjSbDO85h+KgPt4VMqvTImD1Qz8DysK7dGEA/PSL6oopAt7H1sC29hY3uJcsr3ZmFTWc/DGrYsU4nAbr6C3A9k+iWgah08uphgGlfwhyLWAr5u7gptDVTVJY9HuHLyoy6LLB3a6eC6DKF1rYawTIQf3sw44lKgl9sU2/R9D9iKRjZqcamQkszEufXMUfXMUHEUHEUHEUHBiDjVH1zFH1zFH1zFBM1R9cxR9cxR91Yj6mVH1zHrzbncHebc7g70IqhGTg+BA+BBRVBRXYH2bwjzN4R5m8DvJ7dlQb3bY7Qa7FsjqCeZvCOs3gd4/b7s2saCa3P0IJXbk6ET/YG+fEeLdrPbqbTTZVng6zeB369OTrN4HfTtJHi86tE1B1m8DuJUxBFiOraEdW0IEWDvViIBHUKEcW+I4zeB3e7Rh3+nFpUbWlRteAgHija8BG1+Qd6P3Gm2bwgOoRteEdxwI2c0zeEaXhRpeFBnQN7/7whnQN++WwWyBzLSCtgPX6B3qA71GTEUb8G2KRoP83Pu7Gk7SkyX5RvlPQ8yX5UHTBvyFgybFRnxfNpu0pm593Y0r7TtPbvWzXLCgRFAIVA5VGCxRvrE+AR7YZbxLS26Xg0BA0Ab5jpwje92z3MahbyvMFLRvrRCuILgQLgTZYgBQ);
Please note I have to truncate font in encoded text as question character limit is 30000 characters in stack overflow & there are multiple font faces like this.
What is wrong here?
Issue was with my loader for fonts as used for fonts. I was using url-loader like:
{
test: /\.(jpg|png|gif|eot|woff2|woff|ttf|ico|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader'
}
Solution is to modify it limit file size and split the bigger files like :
{
test: /\.(woff2|woff|ttf|eot|svg|otf)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loaders: ["url-loader?limit=100&name=fonts/[name]_[hash].[ext]"]
}
Incase anyone deals with this while using Sensible webpack 5 boilerplate . I solved it by changing the type
from
{ test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' }
to
{ test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/resource' },
nb: also puts svgs separate. You can modify the test
i would like to use two google fonts, but my fear is that adding in this way:
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
could be slower (in performance) than download fonts in collection...
So i download two fonts in collection, but i have doubt how i could to implement in my website...
Maybe i just have to insert the two collections in the css folder and than add in head
<link href='https://path/css/font/ ???????' rel='stylesheet' type='text/css'>
but i don't know what file i have to link in path... For example when i download PT Sans in collection, in this folder i have these files:
I hope you can help me understand more..
Thanks a lot and sorry for my english
Simply call your fonts in css file.
#font-face {
font-family: myFirstFont;
src: url(font1.woff); /* specify the path of your font location*/
}
Repeat this for next fonts.
#font-face {
font-family: myFirstFont;
src: url(font2.woff); /* specify the path of your font location*/
}
You do need even more font files.
If you just open the file from the Google Server...
https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic
... you see how it is done.
You link the font files from the CSS file - not from the link element.
Assuming that you want your fonts loaded locally from in internal folder than an external source:
Add the folliowing to your code in a <style> tag:
#font-face {
font-family: 'PT_Sans';
font-style: Regular;
src: url('../fonts/PT_Sans-Web-Bold.ttf'); /* IE9 Compat Modes */
src: local('PT Sans'), local('PT_Sans'),
url('../fonts/PT_Sans-Web-Regular.ttf') format('truetype')
}
Or you can reference it externally in a CSS file.
In my site I've tried these two methods (One for each time), to import a font:
#import "/va/fonts/FjallaOne-Regular.ttf";
#import url('/va/fonts/FjallaOne-Regular.ttf');
None of them is working. The path is correct.
I don't want to use a HTTP request for this task.
PS: Tried without the quotes too: #import url(/va/fonts/FjallaOne-Regular.ttf);
It doesn't work because you are using an import, not the #font-face, try the following:
#font-face {
font-family: 'FjallaOne-Regular'; /*You can use whatever name that you want*/
src: url('/va/fonts/FjallaOne-Regular.ttf');
}
Finally, select the font-family on your sections, for example:
#styledDiv {
font-family: 'FjallaOne-Regular';
}
Good luck, bro.
I think you might be missing a back-slash in there, I believe the correct syntax is #import url(//address);, I'm not sure though if it would work with a local file.
I personally would define a font-face in my CSS and use that as a regular font-family property. Always worked for me that way whether for local files or fonts online.
Example:
#font-face {
font-family: 'MyWebFont';
src: url('/va/fonts/FjallaOne-Regular.ttf') format('truetype');
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
For the record, I learned the code above some time ago from CSStricks.com
I hope that answers your question.
Happy coding :)