Questions tagged [google-webfonts]

Google Web Fonts project's goals are to create a directory of core web fonts for the world and to provide an API service so that anyone can bring quality typography to their webpages.

google-webfonts
Filter by
Sorted by
Tagged with
1 vote
1 answer
41 views

Unable to use an optimised font as CSS content

The site I'm working on only uses about a dozen of the glyphs in the Material Icons font set. Rather than have a >100kB download, I thought I'd use fontsquirrel.com to produce a font file only ...
0 votes
2 answers
247 views

Web page content changes with different fonts

I have a problem regarding the different fonts and how they change the web page depending on which font is in use. The main font I used in this web page is Cairo imported from Google Fonts and my ...
23 votes
3 answers
25k views

google fonts + webpack

I am new to webpack 2.2 ; I would like to know the best way to integrate a Google font within my project. I am using the Webpack HTML plugin to generate an index.html from a template. So for the ...
0 votes
1 answer
1k views

Font import doesn't apply to Arabic text

I am trying to import a Google font 'Almarai' to my HTML code but it doesn't work. I tried both link and import methods: Link method: <link rel="preconnect" href="https://fonts....
4 votes
1 answer
4k views

Google Webfonts destroys CLS score (FOUT)

So recently, we have been looking into optimizing our website for the new "Core web vitals", and has pinpointed the issues to be related to flexbox row (resolved), which resulted in bad CLS ...
3 votes
2 answers
1k views

Combining Google Fonts requests not working

I'm working on a site on which I need to load two Google fonts. In an attempt to keep things moving as efficiently as possible, I would like to combine the loading of both fonts into one request. I've ...
4 votes
3 answers
4k views

How to combine Google Fonts imports

I am using Wordpress with the Divi theme, There is this code: function et_divi_fonts_url() { $fonts_url = ''; /* Translators: If there are characters in your language that are not *...
13 votes
2 answers
119k views

How to use specific font styles with CSS, from Google fonts (ie. thin, extra-light..)

Google served font like Montserrat has a lot of different styles: Thin, Extra-Light, Light, Regular, etc... I could not find a way to specify a style with CSS. Using Font-weight can access only some ...
0 votes
1 answer
769 views

Importing Google API fonts as HTTPS still not applying in GitHub pages

I'm hosting a pre-made theme on GitHub pages and generated with Jekyll. The theme works properly in localhost, but the fonts do not display correctly on the actual site hosted on GitHub. Following ...
2 votes
2 answers
3k views

Google fonts stopped working suddenly. What caused this?

I am using Google Web Fonts on my website at http://ryanscowles.com. They were working fine, up until a couple days ago. I didn't alter the fonts in the CSS, but they are no longer working. I was ...
1 vote
0 answers
57 views

How to embed attached fonts in my mailer?

I have try to embedding font from the google api as font-family: 'Montserrat', sans-serif; in my mailer html. Anybody please help how can I add it. https://fonts.googleapis.com/css2?family=Montserrat:...
1 vote
2 answers
10k views

Google Web Font Loader - any disadvantages?

I have just find out about this script, when trying to increase my page-speed. Currently I'm loading about 3 Google Web Fonts in the HEAD, and it decreases my page speed since it's a "Render blocking ...
37 votes
6 answers
47k views

How to download multiple formats of a web font from the (official) Google Web Fonts repo?

I've learnt that Google automatically serves TTF, EOT, WOFF, or SVG font files depending on the browser / device it's accessed from. Now I am planning to host and serve the font files from my server ...
6 votes
5 answers
24k views

roboto font not working in css

I've CSS and XHTML files. I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder. In my XHTML i mentioned the CSS Path, '<link href="../css/tab_ux.css" rel="stylesheet" ...
0 votes
1 answer
46 views

Multple Google Fonts in html doc

I want to apply a google font to only specific css selectors or elements in my page. I also want the same font in mutliple weights (Eg Roboto). Not controlled using the css attribute but actually ...
7 votes
3 answers
3k views

Google web font renders differently on mobile Safari vs. desktop Chrome?

A Google web font (Signika) renders differently on desktop versus mobile. As illustrated by these screenshots, the kerning (space between letters) is larger on mobile than desktop, and the stroke is ...
72 votes
17 answers
116k views

Google Fonts are not rendering on Google Chrome

I'm building a new WordPress theme (don't know if that's relevant) and there's this issue that keeps bugging me. I've loaded up Roboto Slab from Google Webfonts (included the CSS in <head> ...
8 votes
2 answers
5k views

Force Chrome to use external font in CSS

It took me a long time to figure out, that Chrome always prefers local installed fonts over a font with the same name that is linked in the css (See also https://stackoverflow.com/a/27704394/1099519). ...
1 vote
0 answers
899 views

"Lato" Google Font vertically stretched in Safari vs Chrome

I'm using for some years Lato from Google Fonts, and my site used to look essentially identical between Safari & Chrome (on the Mac). Lato was rendered as expected on both systems. I upgraded ...
0 votes
1 answer
762 views

Dev Tools showing CSS font correctly but incorrect font is showing

Wordpress is not showing the correct font on the site title. When I inspect, it is showing that it has the correct font (Tangerine) applied, but that's not actually the font showing on the page. To ...
0 votes
1 answer
1k views

Font imported in an Angular app (SCSS) does not load on other devices

I've used two fonts throughout the entire application: Bebas Neue and Nunito. I imported these fonts with @import statements in the styles.scss file in the app directory. @import url('https://fonts....
33 votes
7 answers
61k views

IE9 - CSS3111: @font-face encountered unknown error

I embed three Google Fonts from http://www.google.com/webfonts (Dosis, Open Sans, Lato) And they all work fine except IE9 where it returns: CSS3111: @font-face encountered unknown error. ...
2 votes
0 answers
891 views

Using sysfonts from Google in ggplot2

I am trying to figure out how to add Google Fonts to a ggplot2 with the sysfonts package (or another method). I am can them easily enough with extrafont but does anyone have a workflow to add them ...
0 votes
1 answer
2k views

Load CSS and JS efficiently in Rails ("Use a CDN for all static assets")

I ran an analysis on www.webpagetest.org and it told me this.. > Use a CDN for all static assets: 89/100 > > FAILED - https://fonts.googleapis.com/css?family=Montserrat:400,700 > FAILED -...
2 votes
2 answers
5k views

How to load Google fonts asynchronously with Font Face Observer

After having read this article about the best ways to serve web fonts, I wanted to make use of the recent javascript library Font Face Observer to load Google fonts asynchronously on my website. The ...
32 votes
2 answers
72k views

How to edit .woff font files offered by Google Webfonts?

Is there any free or cheap editor for Windows, that would allow to edit files with .woff extension (I checked in css that the font file has woff extension). These are fonts offered by Google Webfonts ...
1 vote
0 answers
85 views

how to use custom created font in google sheet

in google sheet when using Delius unicase font, cell A10 displays h as H because Delius unicase font has the same glyph for h & H. so ve use custom created Delius unicase font in which h & H ...
1 vote
3 answers
802 views

Fonts with spaces in their name aren't properly applied in CKEditor

Thanks to this post How can I add(programatically) google fonts to ckeditor I am able to add Google Fonts to my ckeditor. However I want to add the font "Goudy Bookletter 1911" and this font is not ...
1 vote
1 answer
3k views

bold font weight not working with Google fonts in dompdf

I'm using dompdf to turn HTML code into pdf. I'm using Google fonts and are importing them like this: @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&...
9 votes
6 answers
32k views

Open Sans Google Web Fonts Rendering in Chrome

I've noticed a significant difference in rending of Open Sans (Google Web Font) from Chrome, to Safari/Firefox. I attach two photos, the first being chrome and the second safari. All I have in the ...
0 votes
2 answers
1k views

Webfonts are not rendering on Gmail app, but are rendering on Gmail Web App

I'm trying to use a "Comic Sans MS" font, this font loads perfectly in the gmail web app, but when it comes to gmail app, it does not render in the gmail or does not load the font, it just displays a ...
1 vote
1 answer
192 views

Specific font has incorrect underline in Firefox only — where is the error, and how to fix it?

Problem A specific font (Concert One from Google Fonts) behaves badly in Firefox only. When underlined, the underline appears as a strikethrough due to being too high. Example Here's my minimal, ...
1 vote
1 answer
1k views

Barlow rendering difference between Google Fonts example page and usage in a separate page

We're using Barlow, available for free from Google fonts, in a web app. Here's the way a sample phrase looks when rendered on Google's example page. (If you want to reproduce it, you will need to ...
0 votes
0 answers
263 views

Google web font causes Safari crash

My app has been crashing on Safari (only) and I've narrowed it down to this one line: <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap" rel="...
6 votes
3 answers
7k views

Google Webfonts chooser and embedder widget for Javascript

Does there already exist a widget which would allow the user to pick his/her choice from one of Google Webfonts fonts and you could embed this widget to your own web application? http://www.google....
0 votes
1 answer
759 views

Google Fonts rendering badly in IE and Edge

I'm using Google's Lato font for headings on a website. In most browsers they render beautifully. In Edge and IE they render perfectly for approximately one second when the page loads - and then ...
0 votes
0 answers
577 views

How to add a google font api in magento admin panel

I am working on editing email templates in the Magento 2 Admin Panel. I am trying to add Montserrat, a google font, to the email templates. Magento doesn't recognize the google font api and won't ...
0 votes
1 answer
60 views

Text logo changes shape erratically while web font styling is applied

I am trying to use Roboto for a text-based logo and have the necessary code to load the font in <head>. While the site is loading, you can briefly see the logo in an ugly default font before ...
2 votes
0 answers
384 views

Request blocked when I try to use a google font

I get the message when I try to use a google font Request for access to cookies or storage for "https://fonts.googleapis.com/css?family=Comfortaa" has been blocked because all requests for memory ...
4 votes
2 answers
2k views

Does DOMContentLoaded wait for web fonts (Firefox)?

I'm using Google's web fonts in an application and I noticed that DOMContentLoaded doesn't seem to fire in Firefox until after the web font is downloaded. Am I doing something wrong or is this ...
5 votes
5 answers
4k views

Google webfont Lato 100 and mobile Safari

I am using Google's web font api with the font "Lato", font-weight of 100. On the desktop browsers I have tested everything displays fine. However if I view the web page with iPad or iPhone (both ...
0 votes
1 answer
83 views

Fixing font difference

I am using this font: https://fonts.googleapis.com/css?family=Poppins (Google Fonts). I implement it into my HTML document like this in the <head> tag: <link href="https://fonts.googleapis....
0 votes
1 answer
2k views

How to alias a google web font font-family/font-weight combination?

TL;DR: DEMO I'm using the google web font Poppins that has a semi bold style. To use it I have to add: body { font-family: 'Poppins'; font-weight: 600; } I want to know if there is a way (and ...
1 vote
1 answer
3k views

Problem with google-font when trying to load it locally

I recently decided to load my font locally for performance purpose. I tried a bunch of script or solution like webfont.js but a couple of days ago I discovered "google-webfonts-helper". It's a really ...
4 votes
0 answers
4k views

How to get true small-caps from a webfont from Google-fonts

I'm using the Alegreya font family from Google Fonts in a website. It seems like Google strips out the small-caps font feature, so although Alegreya has small-caps (see below), they don't seem to work ...
3 votes
1 answer
3k views

Imported font and Highcharts JS export

Is it possible to export an imported font ( like Google webfonts or an own .ttf fontface ) with Highcharts? As you can see in this fiddle if you try to export it uses a standard font. title: { ...
4 votes
0 answers
203 views

Can we load only specific variants of a font family using webfontloader?

Context: I have started out to eliminate the render blocking nature of fonts as browser behaviour, did some research and found out using webfontloader, we can load them asynchronously. Problem: I ...
1 vote
0 answers
206 views

Web fonts in html emails with Gmail

Given Google's support for some style tags in Gmail emails: https://developers.google.com/gmail/design/reference/supported_css but not for @font-face, I am curious as to why @font-face is not ...
2 votes
2 answers
2k views

Embed only some letters of google webfonts

I am using the Roboto and Roboto Sans webfonts of google. Reading the Google Developers Doc there is a way to only embed certain letters of a whole webfont, using ?text=customletters. I have ...
2 votes
2 answers
5k views

Vue.js, vue-cli 3.0 and Google Webfonts

I'm COMPLETLY LOST about including Google Fonts into my project. I've installed google-fonts-webpack-plugin and tried to configure it properly, but the html is not being injected. Or maybe I'm not ...

1
2
3 4 5
9