I'm currently in the process of building a Vue portfolio and I've encountered an issue with setting the global font style to Montserrat. Oddly enough, while Chrome is able to reflect the CSS changes correctly, Safari and Firefox are throwing errors indicating that they are unable to access the Google Fonts URL.
I have experimented with various methods including using @import syntax, font-face syntax, and href links directly in the HTML. Additionally, I attempted to download the fonts and host them within my Vue application, but unfortunately, I haven't been successful in getting it to work as I am still relatively new to Vue development.
Here's what I currently have:
<link href="https://fonts.googleapis.com/css?family=Montserrat:400&display=swap" rel="stylesheet">
While this code does enable Chrome to display the correct font, copying and pasting the URL into either Firefox or Safari results in both browsers being unable to load the page. Upon inspecting the page, both browsers indicate that they are unable to fetch the resource from fonts.google.
In the style section of App.vue:
#app {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
font-family:'Montserrat', Arial, sans-serif;
font-style: normal;
font-weight: normal;
}
I also tried another approach by defining the font face in the HTML:
@font-face {
font-family: 'Montserrat';
src: url('/assets/fonts/Montserrat-Regular.woff2') format('woff2'),
url('/assets/fonts/Montserrat-Regular.woff') format('woff'),
url('/assets/fonts/Montserrat-Regular.ttf') format('truetype');
}
Furthermore, I tested a basic import statement:
@import url('https://fonts.googleapis.com/css?family=Montserrat:400&display=swap');
Unfortunately, none of these solutions seem to be effective. You can simply paste
https://fonts.googleapis.com/css?family=Montserrat:400&display=swap
into Chrome and witness the font selectors, whereas Firefox and Safari fail to even load the page.
My expectation was to have the Montserrat font displayed consistently across Safari, Firefox, and Chrome, yet currently it only renders correctly in Chrome.