I am trying to import a web-font in a certain component in my Vue App (created with Vue cli webpack template). Inside the one of my components I try to import the fonts, by referencing a _fonts.scss within the project that has the contents:
#font-face {
font-family: 'SomeFont';
src: url('~/assets/fonts/SomeFont-Regular.woff2') format('woff2'),
url('~/assets/fonts/SomeFont-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Then, when I open the app, I get this error:
Failed to decode downloaded font: http://localhost:8080/assets/fonts/SomeFont-Regular.woff2
Failed to decode downloaded font: http://localhost:8080/assets/fonts/SomeFont-Regular.woff
With this too:
OTS parsing error: invalid version tag
OTS parsing error: invalid version tag
I searched online for this problem and found nothing, or some relatable circumstances
Try to use relative path when importing fonts in url(). Without '~/fontPath'
Example
#font-face {
font-family: 'MyFont';
src: url("../assets/fonts/MyFont.woff2") format('woff2');
font-weight: normal;
font-style: normal;
}
I had the same problem and found the answer here Vue Cli 3 Local fonts not loading. In short, you have to replace ../assets with ~#/assets.
Related
Want to do something like this:
#font-face {
font-family: 'Proxima Nova SemiBold';
font-style: normal;
font-weight: 600;
src: url(%CREATE_REACT_APP_S3_BUCKET%"/fonts/ProximaNovaSemibold.otf") format('opentype');
}
It's not working. What are my alternatives?
You have two options:
Use inline styles
Load different CSS files in the view depending on the environment variable.
I'm aware of the question change-default-font-in-vuetify in SO, but it doesn't address my problem as it was posted before vue-cli-3 came out, so the ideas there don't apply here as that, the official docs from Vuetify on how to change themes and other options don't have any valid step for when the project is created with vue-cli 3.
So far my attempts go like this:
vue create fooproject (using default config, but even if I don't use the default but cherrypick what I want in the project and select the css-preprocessor as stylus manually it won't work)
vue add vuetify
it creates a plugin dir: src/plugins, where it stores vuetify.js
add a v-btn in the HelloWorld component just for knowing if the font had effect
Then I should be able to import ../stylus/main.styl, where I have:
#import '~vuetify/src/stylus/settings/_variables'
$body-font-family = 'Open Sans', sans-serif;
$heading-font-family = 'Montserrat', sans-serif;
#import '~vuetify/src/stylus/main'
I even tried with #import '~vuetify/src/stylus/main' , do I have to do also vue add additional stylus-loader dependencies or anything plus? Because that's exactly what it's NOT recommended on Vuetify's website.
Error log: no errors, I just keep seing Roboto font in my material buttons
Any remarks?
Other attempts:
I tried to follow the steps written by Jacob E. Dawson but I'm missing something super silly probably.
Edit:
the linked article from medium at the time didn't specify it was not scoped to a specific Vue version as of September 2019.
So I just took a quick and fresh glance back to this, at the end it was something silly, if a project is created with vue-cli 3 (either custom choices or default), then obviously in the component App.vue I had to take out font-family from the style section as it overwrites the CSS:
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; /* this was it */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
EDIT:
It's possible that some styles are broken when importing styles from main.styl:
https://github.com/vuetifyjs/vuetify/issues/3583
Does everything load, do you get any errors?
It seems it should work, unless perhaps you have some typos somewhere, or incorrect paths?
For example stylus should be styles in your #require '~vuetify/src/stylus/main.styl'.
do I have to do also vue add stylus-loader?
It should already be added for you.
If you did not select specific CSS preprocessor (i.e. stylus) during vue-cli installation, then you need to add it manually
npm i -S stylus stylus-loader
module: {
rules: [
{
test: /\.styl$/,
loader: ['style-loader', 'css-loader', 'stylus-loader']
}
]
}
This is working for me using nuxt 2.15.8.
Add this to your nuxt.config.js
vuetify: {
treeShake: true,
defaultAssets: {
font: {
family: "Inter",
},
icons: "mdi",
},
}
If you need different font weights you might have to import them manually in you CSS or as a in your HTML
I have the latest version of videojs. Only in android tablets and mobile, I'm seeing grey boxes where the play and fullscreen buttons should be. These appear properly in other video sites like youtube on the same device. I assume it's the devices own inbuilt controls. Please can anyone tell me how to replace these grey boxes for the correct icons?
The icons in the latest version of VideoJS are now contained within an icon font, which is loaded in using an #font-face rule - this used to be an image sprite.
The reason the font isn't loading is all to do with the syntax they [VideoJS] are using:
#font-face{
font-family: 'VideoJS';
src: url('font/vjs.eot');
src: url('font/vjs.eot?#iefix') format('embedded-opentype'),
url('font/vjs.woff') format('woff'),
url('font/vjs.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Change the above in your videoJS css to:
#font-face{
font-family: 'VideoJS';
src: url('font/vjs.eot?#iefix') format('embedded-opentype'),
url('font/vjs.woff') format('woff'),
url('font/vjs.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This different syntax however wont work with IE7 and IE8. If you need to support < IE9 i suggest using a conditionally loaded css file to load in this rule:
#font-face {
font-family: 'VideoJS';
src: url('font/vjs.eot');
}
More details can be found in these blog posts http://www.mcnab.co/blog/general/font-face-on-android/ and http://www.mcnab.co/blog/general/font-face-on-android/
I'm having a weird issue with the displaying of quotes and accents in Safari 5. I'm using a font-face font with the following code.
#font-face {
font-family: 'MendozaRomanStd-Book';
src: url('fonts/mendozaromanstd-book.eot');
src: url('fonts/mendozaromanstd-book.svg#mendozaromanstd-book') format('svg'),
url('fonts/mendozaromanstd-book.eot?#iefix') format('embedded-opentype'),
url('fonts/mendozaromanstd-book.woff') format('woff'),
url('fonts/mendozaromanstd-book.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
On Firefox, Chrome, Safari 6, iOS6 and IE the font are displayed correctly:
On Safari 5 however I'm seeing this:
Same charset, same html. I've searched everywhere for reported issues with font-face displaying under Safari 5 but there aren't any reports leading me to suspect something else is going on. Anyone have any idea what could going on here?
Turns out Safari 5 does not show accents or symbols in SVG fonts.
It does show them when using TTF or WOFF fonts, but not in SVG.
Chrome or Safari 6 do not seem to have this problem.
I ended up fixing it by defining a separate font with #font-face, and then targetting Safari 5 with browser specific CSS. So:
/* Font-face for all browsers */
#font-face {
font-family: 'MendozaRomanStd-Book';
src: url('fonts/mendozaromanstd-book.eot');
src: url('fonts/mendozaromanstd-book.svg#mendozaromanstd-book') format('svg'),
url('fonts/mendozaromanstd-book.eot?#iefix') format('embedded-opentype'),
url('fonts/mendozaromanstd-book.woff') format('woff'),
url('fonts/mendozaromanstd-book.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Safari5 fix */
#font-face {
font-family: 'MendozaRomanStd-Book2';
src: url('fonts/mendozaromanstd-book.ttf') format('truetype') !important;
font-weight: normal;
font-style: normal;
}
.safari5 body {
font-family: 'MendozaRomanStd-Book2', Times new roman, serif;
-webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
-webkit-text-stroke: rgba(255,255,255,0.01) 0.1px;
}
Please note that this code already contains a fix to enable correct rendering of webfonts in Chrome under PC. With the standard fontsquirrel generated code, this leads to horrible jaggyness and not aliased fonts. Until Google can get its act together, a fix is to elevate the SVG file to the top.
I'm running into a problem with a Rails app I'm building. I'm using fontawesome to render a few icons. The rails app is running on Heroku.
The problem is that on Chrome/Win and IE8, the icons are not rendered. No box - nothing. They render in IE9, Firefox/Win, and they render on all browsers in OS X.
I have the following in my application.rb:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w( .svg .eot .woff .ttf )
The font files are in the assets/font directory, and the SCSS file has this:
#font-face {
font-family: 'FontAwesome';
src: url('<%= asset_path('fontawesome-webfont.eot?') %>');
src: url('<%= asset_path('fontawesome-webfont.eot?#iefix') %>') format('embedded-opentype'), url('<%= asset_path('fontawesome-webfont.woff') %>') format('woff'), url('<%= asset_path('fontawesome-webfont.ttf') %>') format('truetype');
font-weight: normal;
font-style: normal;
}
Has anyone run into similar issues? (Most posts that I've read either show boxes which is not the problem, or they revolve around issue with the font not working in Firefox.)
Include this in your header file
link rel="stylesheet" href="../css/font-awesome.min.css"
For IE7 Support pls add
link rel="stylesheet" href="../css/font-awesome.min.css"
!--[if IE 7]
link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"
![endif]--
What are you are using less or scss for your css ?