Most of the time when I have an issue with @font-face is because my src path isn’t right. Maybe check the console to see if the call to your fonts files return a 404. If your font-face is being called in the style.css in the root of your theme then your font path is more … Read more
There are various ways to accomplish this, but I think it’s neatest and “most WordPress” to enqueue the fonts in your functions file, and then you can specifiy that they should load in the footer using the appropriate parameter: function wpb_add_google_fonts() { wp_enqueue_style( ‘wpse-google-fonts’, ‘http://fonts.googleapis.com/css?family=Roboto’, ”, ”, true ); } add_action( ‘wp_enqueue_scripts’, ‘wpse_add_google_fonts’ );
WordPress default editor have no support for any font change option on it’s tool bar. You have to do some css tricks but its not so easy if you are not a developer. Also its not a good idea to change theme functions or css. But there have a good solution: You can do this … Read more
you should use @font-face for including webfonts. src is not valid outside @font-face (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) – nevertheless, there are a few very tolerant browsers. Remove your styles from style.css line 45–52 and put the following on the top of the file: @font-face { font-family: ‘nafeesnastaleeq’; src: url(‘fonts/nafees/nafeesnastaleeq.eot’); src: url(‘fonts/nafees/nafeesnastaleeq.eot?#iefix’) format(’embedded-opentype’), url(‘fonts/nafees/nafeesnastaleeq.woff’) format(‘woff’), url(‘fonts/nafees/nafeesnastaleeq.ttf’) format(‘truetype’), url(‘fonts/nafees/nafeesnastaleeq.svg#nafeesnastaleeq’) format(‘svg’); … Read more
You have to clarify which custom font, as your question is too broad. Is the custom font available through Google Fonts or which other source? If it is accessible through Google Fonts then use one of the Google Fonts plugins you can find in your WP backend, this will apply the Google Fonts script all … Read more
This is because your the icon is being output outside of the anchors. To fix this issue, add another class, for example my-class to the menu classes. Now, try to position the icon absolutely, and fix the padding: .fa.my-class::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .fa.my-class { margin-left: 10px; padding-left: 10px; … Read more
It’s probably how you’re referencing the fonts from the css. Assuming “style.css” and “fonts” directories are on the same level, your code should work. Are you using a bundler (Webpack or Gulp)? Either could resolve your issue quickly.
Download CSS with info about embedded fonts from Googleapis.com. Example link: https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap Save the file right into your child theme directory so it’s now: https://www.example.com/wp-content/themes/theme-child/fonts.css When you open this fonts.css file, there is content which looks like this: /* latin-ext */ @font-face { font-family: ‘Montserrat’; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format(‘woff2’); unicode-range: … Read more
It’s because you’re only specifying font-family: Marcellus; inside a @media (max-width: 600px) {}, and your desktop browsers are wider than that. Everything else is using the default stack of “Helvetica Neue, Helvetica, Arial”.
Font not showing in Chrome, but fine in Safari